html5(二)之表单
表单
表单也就是交互区域
<form action="https://www.baidu.com/s" target="_self" method="get">
<input type="text" name="wd">
<button>搜索</button>
</form>
form 表单标签
- method:默认值为get,还有 post
- novalidate
button 按钮
input
<input type="" name="" value="" maxlength="">
常用属性
- type:值可以为:text、password、radio(单选框)、checkbox(多选框)、hidden
h5新增属性值: email(邮箱)、url(网址)、number、search、tel、range、date、color、month、week、time、datetime-local(日期+时间)
注意:email(邮箱)、url(网址)、number表单提交会验证格式
- radio
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女
-
多个** radio 的值**一定要保持一致
-
radio 和 checkbox 一定要写 value 属性
-
隐藏域:
<input type="hidden" name="" value="">
-
确认按钮:
-
<input type="submit" value="确认">
按钮千万不要写 name 属性 -
<button type="submit">确认</button>
-
-
重置按钮:
-
<input type="reset" value="重置">
按钮千万不要写 name 属性 -
`
-
-
普通按钮:
<input type="button" value="普通按钮">
按钮千万不要写 name 属性- `
- value:输入框值
- maxlength:输入框的最大长度
文本域
<textarea name="" id="" cols="30" rows="10"></textarea>
下拉框
<select name="place">
<option value="" selected>河北 </option>
- name:指定数据名称
- option:展示的是 value,提交的是 option 之间文字
- selected:默认选中
禁用表单控件 disabled
不希望用户对其进行修改
input、select、button、option、textarea 均可以使用 disabled
例如:<textarea disabled name="" id="" cols="30" rows="10"></textarea>
label 标签
使用标签将表单文字与控件进行关联
写法一:
<label for="passwd">密码</label>
<input id="passwd" type="text" name="password">
写法二:
<label>
密码:
<input id="passwd" type="text" name="password">
</label>
fieldset 和 lengend 对表单信息分类
fieldset 对表单进行分组 ,lengend 分组的标题
<fieldset>
<lengend>主要信息</lengend>
<label>
密码:
<input id="passwd" type="text" name="password">
</label>
</fieldset>
H5新增的表单控件属性
属性名 | 功能 |
---|---|
placeholder | 提示文字,适用于文字输入类的表单控件 |
required | 输入项必填,适用于除了按钮button之外的其他控件 |
autofocus | 自动获取焦点,适用于所有的表单控件 |
autocomplete | 自动完成,可以设置on、off,适用于文字输入类的表单控件,密码输入框与多行输入框不可用 |
pattern | 填写正则表达式,适用于文本输入类的表单控件 |
注意:pattern 多行输入不可用,空的输入不会验证,往往与 required 配合
哪有什么胜利可言,坚持意味着一切。如想使用请备注转载链接~