跳到主要内容

表单

form 标签​

语法格式​

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

属性​

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

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 属性;

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>