html之表单控件

表单控件

常用的有：

• 单行文本框

姓名：<input type="text" name="username">

• 密码框

密码：<input type="password">

• 单选按钮组

<input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"><label for="female">女</label>

• 复选按钮框

<input type="checkbox" checked id="css" value='css'><label for="css">css</label>
<input type="checkbox" id="html" value='html'><label for="html">html</label>
<input type="checkbox" id="js" value='js'><label for="js">js</label>

• 文件上传

<input type="file">

• 重置按钮

<input type="reset">

• 提交按钮

<input type="submit">

1. label表单控件

<label>Click me <input type="text"></label>

<label for="username">Click me</label>
<input type="text" id="username">

3. select表单组件

    <form>
        <select>
            <option value="js">江苏省</option>
            <option value="hn">湖南省</option>
            <option value="ah">安徽省</option>
            <optgroup label="省份">
            <option value="js">江苏省</option>
            <option value="hn">湖南省</option>
            <option value="ah">安徽省</option>
            </optgroup>
        </select>

        <input type="text">
        <textarea name="" id="" cols="30" rows="10"></textarea>

        <!-- h5新增控件 -->
        <!-- 进度条的实现 -->
        <progress max="100" value="70"></progress>

        <!-- 在火狐浏览器中不兼容，在谷歌浏览器中支持 -->
        <input type="number">

        <input type="date">

        <input type="search">
        
        用户名：<input type="text">
        <input type="text" placeholder="请输入用户名">
    </form>