Z
ZHANK

表单元素

select/option/optgroup、textarea、fieldset/legend、datalist/output

表单元素

除了 <input>,HTML 还提供了 <select><textarea><button> 等丰富控件。

学完本章你将: 掌握 select/option、textarea、button、fieldset/legend。


select 下拉选择

html
<label for="city">城市:</label>
<select id="city" name="city">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="shenzhen">深圳</option>
</select>

<!-- 多选 -->
<select name="languages" multiple size="3">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

textarea 多行文本

html
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50">
在这里输入你的留言……
</textarea>

button 按钮

html
<!-- type 决定行为 -->
<button type="submit">提交表单</button>
<button type="reset">重置表单</button>
<button type="button" onclick="alert('Hello!')">普通按钮</button>

fieldset 分组

html
<form>
  <fieldset>
    <legend>个人信息</legend>
    <label>姓名:<input type="text" name="name"></label><br>
    <label>年龄:<input type="number" name="age"></label>
  </fieldset>

  <fieldset>
    <legend>收货地址</legend>
    <label>地址:<input type="text" name="address"></label>
  </fieldset>
</form>