HTML form form

There are many places in HTML that need to log in to register and search, and form forms will be involved;

Common properties of the form:

Attributes	description
name	The name of the form
action	The goal of submitting the form
method	Form submission method (get)
enctype	When uploading files with text and pictures

Common types of input

Type	effect
text	Single line text box
password	Password input box
radio	Single box
checkbox	Checkbox
file	upload files
button	Button
submit	Submit button
reset	Reset button
select	Drop-down box
option	drop-down list
textArea	Multi-line input text box (text field)

Type	effect
color	Palette control
date	Date control
datetime	Date and time controls
datetime-local	Local date and time
month	Month control
week	Day control
email	Email format
number	Digital controls
range	Numerical control bar
search	search bar
tel(pattern="^\d{11}$")	Phone number input box (11 digits)
url	URL input box

Code example:

<body>
		<form action="" method="get" enctype="multipart/form-data">
			<p>单行文本框：</p>
			<input type="text" placeholder="单行文本框" />
			<p>密码输入框</p>
			<input type="password" placeholder="内容以 * 呈现" />
			<p>上传文件：</p>
			<!-- 使用文件时，在form属性里面要写 enctype="multipart/form-data" -->
			<input type="file" />  
			<p>下拉框和下拉选项：</p>
			<select>
				<option value ="1">重庆</option>
				<option value ="2" selected >武汉</option>  <!-- seclected 默认选项 -->
				<option value ="3">成都</option>
				<option value ="4">四川</option>
				<option value ="5">北京</option>
			</select>
			<p>单选框：</p>
			<input type="radio" value="1" name="sex" checked />男  <!-- checked 默认选项 -->
			<input type="radio" value="0" name="sex" />女
			<p>复选框：</p>
			<!-- checked 默认选项
			 checkbox[]  将复选的选项放在一个数组里面
			 -->
			<input type="checkbox" name="checkbox[]" value="0" checked />HTML   
			<input type="checkbox" name="checkbox[]" value="1" />Javascript
			<input type="checkbox" name="checkbox[]" value="2" />PHP
			<p>文本域：</p>
			<input type="textarea" value="多行文本框" />
			<p>按钮:</p>
			<input type="button" value="按钮" />
			<p>提交按钮:</p>
			<input type="submit" value="提交" />
			<p>重置按钮:</p>
			<input type="reset" value="重置" />
			<p>颜色控件：</p>
			<input type="color" />
			<p>日期控件：</p>
			<input type="date" />
			<p>时间控件：</p>
			<input type="time" />
			<p>选择日期和时间：</p>
			<input type="datetime" />
			<p>本地日期和时间：</p>
			<input type="datetime-local" />
			<p>显示月份：</p>
			<input type="month" />
			<p>显示星期：</p>
			<input type="week" />
			<p>显示邮箱：</p>
			<!-- 当输入的不是邮箱形式的时，会有提示 -->
			<input type="email" />
			<p>数字控件：</p>
			<input type="number" />
			<p>数值控制条：</p>
			<!-- step 移动一次的值
				 min 最小值
				 max 最大值
				 value 默认值
			 -->
			<input type="range" step="1" min="0" max="10" value="0" />
			<p>搜索框：</p>
			<input type="search" />
			<p>显示11位手机号码：</p>
			<!-- 当输入的不是数字和超出11位，会有提示 -->
			<input type="tel" pattern="^\d{11}$" />
			<p>网址输入框：</p>
			<!-- 当输入的不是网址时，会有提示 -->
			<input type="url" name="" id="" value="" />
		</form>
	</body>

Some other attributes of input:

Attributes	description
placeholder	Text box prompt information, does not affect the value
autocomplete	Whether to save the input content, on is to save (default), off is not reported
autofocus	Get the focus of the text box, when there is this property, open the web page to automatically get the focus of the text box
required	The text box with this attribute is required, otherwise it cannot be submitted
pattern	Regular verification, the text content meets the verification before submission

ResidualBridge

Published 13 original articles · Likes2 · Visits 317

Private letter concerns

Guess you like