表单元素
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>