HTML表单中input标签中的type属性使用

 type属性表示表单控件的类型

一，radio,checkbox,date,time,datetime-local,month,week等

        1.radio：单选框

                        单选中一组内容必须设置同一个name名；

                        单选中每一个表单控件必须设置value值，如果不设置，显示on,表示选择了某个选项，但是不知道具体选中的内容(在url地址栏上显示)

        checkbox：多选框

                        多选中一组内容必须设置同一个name名；

                        多选中每一个表单控件必须设置value值，如果不设置，显示on,表示选择了某个选项，但是不知道具体先中的内容(跟单选相似)

<form action="./demo4.html" method="get">
        <div>
            选择性别：
            <input type="radio" name="gender" value="man">男
            <input type="radio" name="gender" value="woman">女
            <input type="radio" name="gender" value="other">不限
        </div>
        <div>
            诗和远方：
            <input type="checkbox" name="city" value="shanghai">上海
            <input type="checkbox" name="city" value="fujian">福建
            <input type="checkbox" name="city" value="yunnan">云南
            <input type="checkbox" name="city" value="guizhou">贵州
            <input type="checkbox" name="city" value="xinjiang">新疆
        </div>
</form>

结果是： 

         2.date:日期

            time:时间

            datetime-local:同时选择日期和时间

            month:月份

            week:一年中的第几周

<form action="./demo4.html" method="get">
        <div>
            选择日期：<input type="date" name="date">
        </div>
        <div>
            选择时间：<input type="time" name="time">
        </div>
        <div>
            日期时间：<input type="datetime-local" name="datetime">
        </div>
        <div>
            选择月份：<input type="month" name="month">
        </div>
        <div>
            一年中的第几周：<input type="week" name="week">
        </div>
</form>

结果： 

二,text,password,email,url,number,color,file,seach,submit,reset等

        1.text：文本框

           password：密码框

           email：邮件

           url：网址

           number：数字框

                数字输入框

                        max 最大值

                        min 最小值

                        step 数字之间的间隔(默认为1)

           color：颜色

           file：文件

           seach：搜索框

          submit：提交按钮

           reset：重置按钮

<form action="./demo4.html" method="get">
        <div>
            用户姓名: <input type="text" name="userName">
        </div>
        <div>
            用户密码: <input type="password" name="userPassword">
        </div>
        <div>
            用户邮箱: <input type="email" name="userEmail">
        </div>
        <div>
            输入网址: <input type="url" name="userUrl">
        </div>
        <div>
            用户体温: <input type="number" name="temperature" max="42" min="34" step="0.1">
        </div>
        <div>
            选择颜色: <input type="color" name="userColor">
        </div>
        <div>
            选择文件: <input type="file" name="userFile">
        </div>
        <div>
            搜索内容: <input type="search" name="searchContent">
        </div>
        <input type="submit">
        <input type="reset">
</form>

结果：

三，文本域和下拉框标签：

        textrarea：文本框

                        cols 文本域的宽度

                        rows 文本域的高度

                        文本域中的默认值设置在开始和结束标签中间

        下拉框：

                        select标签：定义下拉框

                        option标签：定义下拉选项

                        selected属性：设置默认选中某个选项

<form action="./demo4.html" method="get">
        <div>
            用户评价：
            <textarea name="textarea" cols="40" rows="15">这是默认值</textarea>
        </div>
        <div>
            用户身高：
            <select name="heightContent">
                <option value="">请选择身高</option>
                <option value="160">160cm</option>
                <option value="165">165cm</option>
                <option value="170">170cm</option>
                <option value="175">175cm</option>
            </select>
        </div>
</form>

结果：