HTML的表单控件整理

整理一下会用到的控件，方便查看

1、文本框

<input type="text" name="text">

2、密码框

<input type="password" name="password">

3、提交按钮

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

4、重置按钮

<input type="reset" name="reset" value="重置">

5、普通按钮

<input type="button" name="button" value="按钮">

6、单选框

<input type="radio" name="radio" value="单选1"> 单选1
<input type="radio" name="radio" value="单选2"> 单选2

7、复选框

<input type="checkbox" name="checkbox1" value="复选1"> 复选1
<input type="checkbox" name="checkbox2" value="复选2"> 复选2

8、下拉框

<select name="select">
    <option value="下拉1" selected>下拉1</option>
    <option value="下拉2">下拉2</option>
</select>

9、下拉框分组

<select name="select2">
    <optgroup label="一组">
        <option value="下拉1" selected>下拉1</option>
        <option value="下拉2">下拉2</option>
    </optgroup>
    <optgroup label="二组">
        <option value="下拉3" selected>下拉3</option>
        <option value="下拉4">下拉4</option>
    </optgroup>
</select>

10、文本框快速输入

<input type="text" list="datalist" name="datalist">
<datalist id="datalist">
    <option value="datalist1"></option>
    <option value="datalist2"></option>
</datalist>

11、邮箱

<input type="email" name="email" required>

12、网址

<input type="url" name="url" required>

13、数字

<input type="number" name="number" min="0" max="99" step="1" value="0">

14、数字范围

<input type="range" name="range" min="1" max="100" step="2" value="1">

15、日期选择

<input type="date" name="date">

16、时间选择

<input type="time" name="time">

17、月份选择

<input type="month" name="month">

18、星期选择

<input type="week" name="week">

19、日期时间选择

<input type="datetime-local" name="datetime-local">

20、搜索

<input type="search" name="search">

21、颜色选择

<input type="color" name="color">

22、文件选择

<input type="file" name="file">

23、多行文本框

<textarea name="textarea" rows="3" cols="20"></textarea>

24、进度条

<progress name="progress" max="100" value="30"></progress>

25、度量条

<meter name="meter" min="0" max="100" value="20" low="30" high="60"></meter>

26、对表单的控件分组

<fieldset>
    <legend>一组</legend>
    <div>
        文本框1：<input type="text" name="text1">
    </div>
</fieldset>
<fieldset>
    <legend>二组</legend>
    <div>
        文本框2：<input type="text" name="text2">
    </div>
</fieldset>