HTML表单用于搜集不同类型的用户输入。
表单的一系列操作都要定义在<form>标签内,就像表格要定义在<table>标签中一样。
1. <input>标签
表单由表单元素组成,表单元素指的是不同类型的 input 元素。<input>标签来表示这些元素,<input>有很多形态(type形态),根据不同的 type 属性值,表示不同的操作,type的值如下:
- text:定义常规文本输入(单行)
- radio:定义单选按钮
- submit:定义提交按钮,进行表单的提交(向表单处理程序提交表单)
- password:定义密码输入,输入的文本回显为*******
- name:表单想要正确提交,必须对每个输入的字段设置一个name,因为表单处理程序是根据name属性获取数据的
- number:只能输入数字,并对输入的数字进行限制(min, max)
- date:日期的输入(输入框为一个日期选择器)
- color:颜色的选择(输入框为一个颜色选择器)
- email:邮箱的输入(会对输入格式进行简单的判断)
示例如下:
<!DOCTYPE html>
<html>
<body>
<form>
userName:<br>
<input type="text" name="userName">
<br>
password:<br>
<input type="password" name="password">
</form>
</body>
</html>
显示效果:
2.<form>标签
form标签中有很多的属性,用来定义表单的不同操作。
<form>标签属性:
标签 | 描述 |
---|---|
action | 指向表单处理程序(某个服务器脚本),默认为当前页面 |
method | 规定在提交表单时所用的 HTTP 方法(get/post) |
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集) |
autocomplete | 规定浏览器应该自动完成表单(默认:开启) |
enctype | 规定被提交数据的编码(默认:url-encoded) |
name | 规定识别表单的名称(对于DOM使用:document.forms.name) |
novalidate | 规定浏览器不验证表单 |
target | 规定 action 属性中地址的目标(默认:_self |
3. <fieldset>标签组合表单数据
<fieldset>标签将其内部的所有表单元素在显示上用一个框框起来
- legend属性定义方框的标题
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="liu">
<br>
Last name:<br>
<input type="text" name="lastname" value="yiming">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
显示效果:
4. 表单元素
4.1 下拉表单
<select>定义下拉列表:
- name:下拉列表的名字
<option>定义下拉列表选项:
- selected:表示该选项为下拉列表默认展示值
- value:选项的值
<!DOCTYPE html>
<html>
<body>
<form>
<select name="cars">
<option value="Benz>奔驰</option>
<option value="BMW">宝马</option>
<option value="Audi">奥迪</option>
<option value="Ford">福特</option>
</select>
<br><br><br><br>
<input type="submit" value-"提交">
</form>
</body>
</html>
显示效果:
4.2 <textarea>标签
<textarea>多行输入文本,文本右下角可以调整大小。
- row,col:多行文本的初始大小。
4.3<button>标签
<button>定义可点击的按钮,点击后可弹出弹窗。
<!DOCTYPE html>
<html>
<body>
<form>
<button type="button" onclick="alert('Hello World!')">点击我!</button>
</form>
</body>
</html>
4.4 <datalist>标签
将\元素最终的值设置一个下拉列表进行选择。
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<input list="cars">
<datalist id="cars">
<option value="Benz">
<option value="Audi">
<option value="BMW">
<option value="Ford">
</datalist>
<input type="submit" value="提交">
</form>
</body>
</html>
4.5 <checkbox>标签
<checkbox>定义复选框(允许用户在有限数量的选项中选择零个或多个选项),和datalist一样,但是样式不同。
5. <input>标签输入属性
value属性规定输入字段的默认值。
readonly 属性规定输入字段为只读,可以用value设置默认值,再将默认值设置为只读,即不能输入。如果没有默认值且设置只读,那么无法输入。
disabled 属性规定输入字段是禁用的,被禁用的元素是不可用和不可点击的,被禁用的元素不会被提交。
maxlength规定输入字段允许的最大长度 属性规定输入字段允许的最大长度