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="">
常用属性

1. 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 属性
  • `重置

2. value：输入框值
3. 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 配合