【资源帖】表单标签的用法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>表单学习</title>
        <style type="text/css">
form {
    width: 300px;
    height: 300px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1px solid #000;
}

form div {
    margin: 20px 0px;
}

form label {
    display: inline-block;
    width: 88px;
    text-align: right;
}

form input[type="submit"] {
    margin-left: 114px;
}

form input[type="date"] {
    /* inline-block */
    width: 168px;
}
        </style>
    </head>

    <body>
<form action="" method="post">
<div>
    <label for="username">用户名：</label><input type="text" name="username" id="username" value="" />
</div>
<div>
    <label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" value="" />
</div>
<div>
    <label for="birthday">出生年月：</label><input type="date" name="birthday" id="birthday" value="" />
</div>
<div>
    <label for="birthday">出生年月：</label><input type="range" name="birthday" id="birthday" value="" />
</div>
<div>
    <input type="submit" value="注册" />
</div>
</form>
<!--
    form 标签  包含网页中的表单，表单的容器
        action  制定用哪个文件来处理表单
        method  处理表单的方法

    input  默认的显示方式display是     inline-block
    label  默认的显示方式display是     inline
        block            要求单独占一行
        inline           不要求单独占一行，没有宽和高
        inline-block     不要求单独占一行，有宽和高

    块元素水平居中
        设置固定宽度
        水平方向的margin为auto

    块元素的水平垂直居中(方法之一)
        margin设置为auto
        绝对定位
        left right top bottom 四个值设置为0

    input type
        button  定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
        checkbox    定义复选框。
        file    定义输入字段和 "浏览..." 按钮，供文件上传
        hidden  定义隐藏输入字段
        image   定义图像作为提交按钮
        password    定义密码字段。字段中的字符会被遮蔽。
        radio   定义单选按钮。
        reset   定义重置按钮。重置按钮会将所有表单字段重置为初始值。
        submit  定义提交按钮。提交按钮向服务器发送数据。
        text    默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。

        html5新增的type属性，浏览器的兼容性不能保证（caniuse.com查看兼容性）
        url 定义用于 URL 的文本字段。
        tel 定义用于电话号码的文本字段。
        search  定义用于搜索的文本字段。
        range   定义带有 slider 控件的数字字段。
        number  定义带有 spinner 控件的数字字段
        color   定义拾色器。
        date    定义日期字段（带有 calendar 控件）
        datetime    定义日期字段（带有 calendar 和 time 控件）
        datetime-local  定义日期字段（带有 calendar 和 time 控件）
        month   定义日期字段的月（带有 calendar 控件）
        week    定义日期字段的周（带有 calendar 控件）
        time    定义日期字段的时、分、秒（带有 time 控件）
        email   定义用于 e-mail 地址的文本字段
-->
    </body>

</html>
BestACE / fed

【资源帖】表单标签的用法 #410
