# 其他表单元素及输入验证

11_0_其他表单元素及输入验证.png

# 使用其他表单元素

以下五个表单元素前面还没有介绍：select，optgroup，textarea，output，keygen

# select(选择框)

局部属性：name，disabled，form，size，multiple，autofocus，required
内容：option和optgroup元素
HTML5中变化：form、autofocus和required属性为HTML5新增

<form>
  <p>
    <label for="fave">
      Favorite Fruit:
      <select id="fave" name="fave" multiple>
        <option value="apples" label="Apples_label">Apples</option>
        <option value="oranges" label="Oranges_label">Oranges</option>
        <option value="pears" selected>Pears</option>
        <option value="cherries" label="Cherries_label"></option>
      </select>
    </label>
  </p>
  <input type="submit" value="submit" />
</form>

注意:

Chrome和IE的选择框默认显示的值优先为label属性的值，其次为option元素内容。但Firefox浏览器只会显示option元素内容
如果没有设置selectd属性，那么默认选择为第一个option的值

使用select的multiple属性，可以多选，多选时需要按ctrl+鼠标左键

...
<select id="fave" name="fave" multiple>
...

# optgroup(为option分组)

 <p>
  <label for="fave">
    Favorite Fruit:
    <select id="fave" name="fave">
      <optgroup label="分组1">
        <option value="apples" label="Apples_label">Apples</option>
        <option value="oranges" label="Oranges_label">Oranges</option>
      </optgroup>
      <optgroup label="分组2">
        <option value="pears" selected>Pears</option>
        <option value="cherries" label="Cherries_label"></option>
      </optgroup>
    </select>
  </label>
</p>

# textarea(输入多行文本)

textarea元素的rows和cols属性可用来设置其大小，wrap属性有两个值：hard和soft，可用来控制在用户输入文字中插入换行符的方式。

默认 cols="20" rows="2", warp="soft"
如果warp为hard，textarea换行时，内容会加上"%0d%0a"换行符

<p>
  story1:
  <textarea name="story1"></textarea>
</p>
<p>
  story2:
  <textarea name="story2" cols="20" rows="2"></textarea>
</p>
<p>
  story3:
  <textarea name="story3" cols="40" rows="5"></textarea>
</p>
<p>
  story4:
  <!-- textarea内容换行会加上%0d%0a story4=你的影子哒哒哒哒哒哒呵%0D%0A呵订单 -->
  <textarea name="story4" wrap="hard"></textarea>
</p>
<p>
  story5:
  <!-- 默认，中间不会加换行符 story5=你的影子哒哒哒哒哒哒呵呵订单 -->
  <textarea name="story5" wrap="soft"></textarea>
</p>

# output(表示计算结果)

局部属性：name, from， for，HTML5新增，习惯样式：output { display: inline;}

<form onsubmit="return false" oninput="res.value = quantity.valueAsNumber * price.valueAsNumber">
  <fieldset>
    <legend>价格计算器</legend>
    <input type="number" placeholder="quantity" id="quantity" name="quantity" /> x 
    <input type="number" placeholder="price" id="price" name="price" /> = 
    <output for="quant name" name="res" />
  </fieldset>
</form>

# keygen元素(生成公开/私有密钥对)

keygen元素的用途是生成公开/私有秘钥对。提交表单时，该元素会生成一对新的秘钥。公钥被发给服务器，而私钥由浏览器保留并存入用户的秘钥仓库。keytype属性的用途是指定用来生成秘钥对的算法，仅支持RSA一种。challenage属性用来指定一条与公钥一起发送给服务器的秘钥管理口令(challenge phrase)

局部属性：challenge，keytype，autofocus，name，disabled，form

暂时不知道具体使用场景，待后续研究。

# 使用输入验证

11_6_输入验证.png

# required属性

必须输入，不然submit时会校验失败，表单无法提交

# min和max

确保输入值在某个范围内

# pattern

确保输入值与模式匹配，pattern为正则规则。有内容才会校验，没输入内容不会校验，常与required属性一起用。

<input type="text" name="un" pattern="[A-z]{3}" />

# novalidate(禁用输入验证)

两种方式可以禁用默认的表单验证。如下：

<form name="form1" novalidate>

<input type="submit" value="提交" formnovalidate>

← 定制input元素嵌入内容 →