HTML5 表单

表单学习

Posted by HuberyYang on April 2, 2017
    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>表单</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            *{  
                font-family: 微软雅黑;  
                text-align: left;  
                margin: 5px;  
            }  
      
            td{  
                height: 30px;  
            }  
      
            textarea{  
                /*关闭文本域的重置大小的能力*/  
                resize: none;  
            }  
      
        </style>  
      
    </head>  
    <body>  
        <!-- 直接布置表单,不容易对齐 -->  
        <h1>请注册:</h1>  
        <!-- action 数据传输位置 -->  
        <!-- method 数据传输方式,post安全性更好,默认为get -->  
        <!-- 当表单中有文件需要上传时需要加上编码申明:enctype='multipart/form-data',不然文件不会被传输 -->  
        <form action="zhuce.php" method="post" enctype='multipart/form-data'>  
            <p>  
                <span>用户名:</span>  
                <input type="text" name="username">  
            </p>  
            <p>  
                <span>密码:</span>  
                <input type="password" name="password">  
            </p>  
            <p>  
                <span>确认密码:</span>  
                <input type="password" name="sureword">  
            </p>  
            <p>  
                <span>手机号:</span>  
                <input type="text" name="phonenumber">  
            </p>  
            <p>  
                <!-- 文件上传 -->  
                <input type="file" name="文件上传">  
            </p>  
            <p>  
                <input type="submit" value="确认">  
                <input type="reset" value="重置">  
            </p>  
      
        </form>  
      
        <!-- 内嵌表格,易于对齐,配置(中国式做法) -->  
        <h1>请注册:</h1>  
        <form action="zhuce.php" method="post">  
            <table border="0px" cellspacing="0px" width="300px">  
                <tr>  
                    <td>  
                        用户名:      
                    </td>  
                    <td>  
                        <!-- maxlength 最大长度 -->  
                        <!-- readonly 只读,不能修改,但提交时值会被传输 -->  
                        <!-- disabled 禁用,不能修改,提交时也不会被传输 -->  
                        <input type="text" name="username" maxlength="10" readonly value="初始值">         
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        密码:  
                    </td>  
                    <td>  
                        <input type="password" name="password">  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        确认密码:  
                    </td>  
                    <td>  
                        <input type="password" name="sureword">  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        手机号:      
                    </td>  
                    <td>  
                        <input type="text" name="phonenumber">  
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                           
                    </td>  
                    <td>  
                        <input type="submit" value="确认">  
                        <input type="reset" value="重置">         
                    </td>  
                </tr>  
      
            </table>  
      
        </form>  
      
        <!-- 从上到下布局,西式做法 -->  
        <h1>请注册:</h1>  
        <form action="zhuce.php" method="post">  
            <p>用户名:</p>  
            <p><input type="text" name="username"></p>  
            <p>密码:</p>  
            <p><input type="password" name="password"></p>  
            <p>确认密码:</p>  
            <p><input type="password" name="sureword"></p>  
            <p>手机号:</p>  
            <p><input type="text" name="phonenumber"></p>  
            <p>  
                <input type="submit" value="OK">  
                <input type="reset" value="Cancel">         
            </p>  
        </form>  
      
        <h1>其他</h1>  
        <form>  
            <!-- 下拉菜单 -->  
            <p>选择收货地址</p>  
            <p>  
                <select name="城市">  
                    <option value="">请选择</option>  
                    <option value="">北京</option>  
                    <option value="">天津</option>  
                    <option value="">上海</option>  
                    <option value="">深圳</option>  
                      
                </select>  
            </p>  
      
            <!-- 单选 -->  
            <p>单选</p>  
            <p>  
                <!-- label 的作用是在点击文字部分也能选择 -->  
                <label><input type="radio" name="sex"></label>  
                <label><input type="radio" name="sex"></label>  
            </p>  
      
            <!-- 多选 -->  
            <p>多选</p>  
            <p>  
                <label><input type="checkbox" name="love[]">篮球</label>  
                <label><input type="checkbox" name="love[]">排球</label>  
                <label><input type="checkbox" name="love[]">羽毛球</label>  
                <label><input type="checkbox" name="love[]">乒乓球</label>  
            </p>  
      
            <p>  
                <input type="submit" value="提交">  
                <input type="reset" value="取消">  
            </p>  
      
            <!-- 文本域 -->  
            <p>请留言:</p>  
            <!-- cols  列;rows 行 -->  
            <textarea name="mess" cols="100" rows="20"></textarea>  
      
        </form>  
      
    </body>  
    </html>