文档:
表单元素
一、表单元素汇总
form:表示HTML表单
input:表示用来收集用户输入数据的控件
textarea:表示可以输入多行文本的控件
select:表示用来提供一组固定的选项
option:表示提供一个选项
optgroup:表示一组相关的option元素
buttton:表示可用来提交或者重置的表单按钮(或一般按钮)
datalist:定义一组提供给用户的建议值
fieldset:表示一组表单元素
legend:表示fieldset元素的说明性标签
label:表示表单元素的说明标签
output:表示计算结果
二、表单元素解析
1、定义表单
<form>
用户名:<input name="user">
<button>提交</button>
</form>
<form>元素主要是定义本身是一组表单。
属性:
action:表示表单提交的页面,默认提交给当前页面
method:表示表单的请求方式,post和get两种,默认get
enctype:浏览器发送给服务器的数据所采用的编码格式。不建议使用
name:设置表单的名称,以便程序调用
target:设置提交时的目标位置
autocomplete:设置浏览器记住用户输入的数据,实现自动完成表单。默认为on自动完成,如果不想自动完成则设置成off.
novalidate:设置是否执行客户端数据有效性检查。
2、input:用户输入数据
属性
autofocus:让光标聚焦在某个input元素上,让用户直接输入。
disabled:禁用input元素,禁用后改input不能输入文本了。
autocomplete:单独设置input元素的自动完成功能。
form:让表单外的元素和指定的表单挂钩提交。
type:input元素的类型,内容较多,将在下节课讲解。
name:定义input元素的名称,以便接收到相应的值。
<form method="get" id="login">
用户名:<input name="user">
<button>提交</button><br>
</form>
<br>
电子邮件:<input name="email" form="login">
3、label标签:添加说明标签
<form method="get" id="login">
<label>
用户名:<input name="user">
<button>提交</button><br><br>
</label>
<label>
电子邮件:<input name="email" form="login">
</label>
</form>
能够实现当点击 “用户名”的时候,光标也会显示在用户名后面的输入框中。让用户体验更好。
4、fieldset:对表单进行编组
fieldset元素可以将一些表单元素组织在一起,形成一个整体。
属性:
name:给分组定义一个名字。
form:让表单外的分组与表单挂钩
disable:禁用分组内的表单
5、legend添加分组说明标签
<fieldset name="pwd">
<legend>密码表单</legend>
密码:<input name="pass"><br><br>
确认密码:<input name="repass">
</fieldset>
6、button按钮
type属性:
submit:提交表单,默认
reset:重置表单,不是清空,而是回到初始化的状态,相当于刷新。
button:一般性按钮
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
源码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>表单元素</title>
</head>
<body>
<br><br>
表单元素
<hr><br>
<form method="get" id="login">
<fieldset name="username">
<legend>用户名表单</legend>
<label>
用户名:<input name="user">
</label>
<label>
电子邮件:<input name="email" form="login">
</label>
</fieldset><br><br>
<fieldset name="pwd">
<legend>密码表单</legend>
密码:<input name="pass"><br><br>
确认密码:<input name="repass">
</fieldset><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button><br><br>
</form>
<br>
<!-- 电子邮件:<input name="email" form="login"> -->
</body>
</html>