HTML表单详解

<form method="get或者post" action="向何处发送表单数据">
    <!--
        type属性：定义输入框的类型。
            01、"button"：定义可点击的按钮（通常与JavaScript一起使用来启动脚本）。
            02、"checkbox"：定义复选框。
            03、"color"：定义拾色器。
            04、"date"：定义date控件（包括年、月、日，不包括时间）。
            05、"datetime"：定义date和time控件（包括年、月、日、时、分、秒、几分之一秒，基于UTC时区）。
            06、"datetime-local"：定义date和time控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
            07、"email"：定义用于e-mail地址的字段。
            08、"file"：定义文件选择字段和"浏览..."按钮，供文件上传。
            09、"hidden"：定义隐藏输入字段。
            10、"image"：定义图像作为提交按钮。
            11、"month"：定义month和year控件（不带时区）。
            12、"number"：定义用于输入数字的字段。
            13、"password"：定义密码字段（字段中的字符会被遮蔽）。
            14、"radio"：定义单选按钮。
            15、"range"：定义用于精确值不重要的输入数字的控件（比如slider控件）。
            16、"reset"：定义重置按钮（重置所有的表单值为默认值）。
            17、"search"：定义用于输入搜索字符串的文本字段。
            18、"submit"：定义提交按钮。
            19、"tel"：定义用于输入电话号码的字段。
            20、"text"：默认。定义一个单行的文本字段（默认宽度为20个字符）。
            21、"time"：定义用于输入时间的控件（不带时区）。
            22、"url"：定义用于输入URL的字段。
            23、"week"：定义week和year控件（不带时区）。

        placeholder属性：
            描述输入字段预期值的简短的提示信息。兼容到IE8以上。

        name属性：
            必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器。

        value属性：
            设置输入框中要显示的值。
    -->

    <!--value属性值显示在按钮上。点击按钮时将会启动js的msg()方法-->
    <p>01、button：<input type="button" value="执行" onclick="msg()" /></p>
    <br />
    <!--checked属性设置默认选中的复选按钮-->
    <p>02、checkbox：<input type="checkbox" name="checkbox[]" value="bike" checked />自行车</p>
    <p>02、checkbox：<input type="checkbox" name="checkbox[]" value="car" checked />小轿车</p>
    <p>02、checkbox：<input type="checkbox" name="checkbox[]" value="boat" />船</p>
    <br />
    <p>03、color：<input type="color" name="color" /></p>
    <p>04、date：<input type="date" name="date" /></p>
    <p>05、datetime：<input type="datetime" name="datetime" placeholder="请输入具体时间" /></p>
    <p>06、datetime-local：<input type="datetime-local" name="datetime-local" /></p>
    <p>07、email：<input type="email" name="email" /></p>
    <p>08、file：<input type="file" name="file" /></p>
    <br />
    <!--定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由JavaScript改变它们的值-->
    <p>09、hidden：<input type="hidden" name="hidden" value="hidden" /></p>
    <br />
    <!--width和height属性用来设置图片的宽高。alt属性设置图片不显示之后(加载失败)的提示信息。-->
    <p>10、image：<input type="image" src="/imgs/01.jpg" width="160px" height="90px" alt="这是图片" /></p>
    <br />
    <p>11、month：<input type="month" name="month" /></p>
    <br />
    <!--max属性设置允许的最大值。min属性设置允许的最小值。step属性设置合法数字间隔。value属性设置默认值-->
    <!--step属性设置为2，如果此时值为3时，鼠标点击一下(增大/缩小)数字，数字变为(5/1)-->
    <p>12、number：<input type="number" name="number" min="1" max="5" step="2" value="1" /></p>
    <br />
    <p>13、password：<input type="password" name="password" /></p>
    <br />
    <p>14、radio：<input type="radio" name="radio" value="男" />男</p>
    <!--checked属性设置默认选中的单选按钮-->
    <p>14、radio：<input type="radio" name="radio" value="女" checked />女</p>
    <br />
    <!--max属性设置允许的最大值。min属性设置允许的最小值。step属性设置合法数字间隔(即鼠标移动增大/缩小数字时的跨幅)。value属性设置默认值-->
    <!--step属性设置为20，如果此时值为50时，鼠标向(左/右)移动一下，数字变为(30/70)-->
    <p>15、range：<input type="range" name="range" min="10" max="90" step="20" value="60" /></p>
    <br />
    <!--value属性值显示在按钮上-->
    <p>16、reset：<input type="reset" value="恢复默认" /></p>
    <br />
    <p>17、search：<input type="search" name="search" /></p>
    <br />
    <!--value属性值显示在按钮上-->
    <p>18、submit：<input type="submit" value="上传数据" /></p>
    <!--上下两个提交按钮标签效果一样-->
    <p>18、submit：<button type="submit">上传数据</button></p>
    <br />
    <p>19、tel：<input type="tel" name="tel" /></p>
    <p>20、text：<input type="text" name="text" placeholder="请输入一段文本" /></p>
    <p>21、time：<input type="time" name="time" /></p>
    <p>22、url：<input type="url" name="url" /></p>
    <p>23、week：<input type="week" name="week" /></p>
</form>

显示结果：