HTML5之表单元素的使用

我不是女神ヾ 2022-09-19 12:03 154阅读 0赞

<!DOCTYPE html>  
<meta charset=utf-8 />  
<title>forms</title>  
<style type="text/css">  
 \*\{margin:0;padding:0;\}  
 \#container\{ width:400px; height:auto; margin:0 auto;\}  
 input\{ width:200px; height:30px; border:1px solid \#CCC;\}  
 tr\{ height:50px;\}  
 \#container \#myTab\{ width:80%;\}  
 \#container \#myTab .head\{ text-align:center;\}  
 \#container \#myTab .left\{ width:30%;\}  
 \#container \#myTab .submit\{ text-align:center;\}  
 \#container \#myTab \#submit\{ width:70px; height:30px;\}  
</style>  
<div id="container">  
 <form action="\#" method="post">  
     <table id="myTab">  
         <tr>  
             <td colspan="2" class="head"><h1>注册表单</h1></td>  
            </tr>  
            <tr>  
             <td class="left">用户昵称:</td>  
                <td><input type="text" name="uname" placeholder="请输入用户昵称" required></td>  
            </tr>  
            <tr>  
             <td>用户密码:</td>  
                <td><input type="password" name="upwd" placeholder="请输入用户密码" required></td>  
            </tr>  
            <tr>  
             <td>工作年龄:</td>  
                <td><input type="range" name="workn" min=0 max=60 step=1><output onforminput="value=workn.value">10</output></td>  
            </tr>  
            <tr>  
             <td>年龄:</td>  
                <td><input type="number" name="age"  placeholder="年龄必须为数字"/></td>  
            </tr>  
            <tr>  
             <td>出生日期:</td>  
                <td><input type="date" name="birthday" required></td>  
            </tr>  
            <tr>  
             <td>电话号码:</td>  
                <td><input type="tel" name="tel"/></td>  
            </tr>  
            <tr>  
             <td>电子邮件:</td>  
                <td><input type="email" name="email"/></td>  
            </tr>  
            <tr>  
             <td>个人首页:</td>  
                <td><input type="url" name="mainindex" list="mylist"></td>  
                <datalist id="mylist">  
                 <option value=" [www.baidu.com">www.baidu.com</option][www.baidu.com_www.baidu.com_option] >  
                    <option value=" [www.google.com.hk">www.google.com.hk</option][www.google.com.hk_www.google.com.hk_option] >  
                </datalist>  
            </tr>  
            <tr>  
             <td colspan="2" class="submit"><input type="submit" name="submit" id="submit"/></td>  
            </tr>  
        </table>  
    </form>  
</div>

[www.baidu.com_www.baidu.com_option]: http://www.baidu.com'%20rel=
[www.google.com.hk_www.google.com.hk_option]: http://www.google.com.hk'%20rel=