跳到主要内容

表单

form 标签​

语法格式​

  • 定义表单；
<form action="/my-handling-form-page" method="post"></form>

属性​

action​
  • 设置表单数据发送至的位置；
method​
  • 设置数据发送方法；
    • get；
    • post；
enctype​
  • 设置发送数据 Content-Type 的值；

表单控件通用属性​

value​
  • 设置表单输入默认值；
  • 推荐总是使用；
id​
  • 用于表单 for 属性；
  • 推荐总是使用；
name​
  • 设置表单控件名称，以供服务端识别；
  • 推荐总是使用；
form​
  • 属性值为关联表单 id 属性值；
  • 表示控件关联到同一文档下的表单；
  • 使其在 form 标签外部甚至其他 form 标签内部定义；
disabled​
  • 布尔属性；
  • 表示禁止该标签；
required​
  • 布尔属性；
  • 用于 input，select 和 textarea；
  • 表明提交表单之前，需要填充一个值；

label 标签​

语法格式​

  • 设置说明文字；
<label for="cheese">Do you like cheese?</label>
<label>Click me <input type="text" /></label>

可访问性​

  • 关键标签；
  • label 标签与表单控件推荐一一对应；

关联机制​

  • 使用 for 属性关联 input id 属性，input 标签嵌套于 label 标签中；
  • 点击 label 标签，同时作用于关联的表单控件；

output 标签​

语法格式​
  • 显示多个关联控件的计算结果；
  • 显示关联控件值；
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
关联机制​
  • 使用 for 属性关联 input id 属性；

textarea 标签​

语法格式​

  • 多行文本控件；
  • 默认值放置于 opening 和 closing tags 之间；
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

resize 属性​

  • 通过 css 中的 resize 属性；
  • 控制其是否可以调整大小；

属性​

cols/rows​
  • 设置行/列可见字符数量；
  • 正整数，默认为 20；
  • 可通过拉伸修改；
wrap​
  • soft；
    • 默认值；
    • 浏览器渲染换行；
    • 服务器提交不换行；
  • hard：浏览器渲染和服务器都换行；
  • off：浏览器渲染和服务器都不换行；

fieldset 标签​

语法格式​

  • 语义标签；
  • 将具有相同作用的控件组合；
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small" />
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium" />
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large" />
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

legend 标签​

  • 嵌套于 fieldset 标签；
  • 声明 fieldset 标签中所有控件的作用；
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    ..;
  </fieldset>
</form>