基本表单 - Dis羽神

基本表单
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>用户注册</title>//网页名称
  9 </head>
 10 
 11 <body>
 12     <form action="https://home.cnblogs.com/u/Disyushen666/" method="post">
//网页的表单 action：提交表单时发送数据到指定地址处理  method：规定发送的http方法 post是向服务器发送数据，而get则相反

 13 
 14         <table align="center" border="1 px" cellspacing="0">
               align:对其方式 center left right

 15 
 16             <caption>用户注册</caption>//表的名称
 17             <tr>
 18                 <td>学号</td>
 19                 <td>
 20                     <input type="number" name="studentnumber" min="201700000000" max="201900000000" required>
                        //input：number 用来指定输入数据为数字 可以设置数据的范围  required则限定必须在这里输入数据，否则报错

 21                 </td>
 22             </tr>
 23             <tr>
 24                 <td>用户名</td>
 25                 <td>
 26                     <input type="text" name="user">
                         input的默认方式，输入类型为文本

 27                 </td>
 28             </tr>
 29             <tr>
 30                 <td>密码</td>
 31                 <td>
 32                     <input type="password" name="pw" id="">
                        input:passeord 用来输入密码等重要数据的输入，输入时，别人看不到具体的密码，此时看到的只是小黑点

 33                 </td>
 34             </tr>
 35             <tr>
 36                 <td>确认密码</td>
 37                 <td>
 38                     <input type="password" name="pwr" id="">
 39                 </td>
 40             </tr>
 41             <tr>
 42                 <td>用户类型</td>
 43                 <td>
 44                     <select name="user" id="">//设置选项下拉
 45                         <optgroup label="普通用户">//选项分组
 46                             <option value="1">学生</option>
 47                             <option value="2">老师</option>
 48                         </optgroup>
 49                         <optgroup label="管理员">
 50                             <option value="3">教务</option>
 51                             <option value="4">辅导员</option>
 52                             <option value="5">维护人员</option>
 53                         </optgroup>
 54                     </select>
 55                 </td>
 56             </tr>
 57             <tr>
 58                 <td>性别</td>
 59                 <td>
 60                     <input type="radio" name="sex" values="man" checked id="">男
                        //input:radio 用来选择其中的一个，比如男女，只能选择其中一个，实现的前提时
                        要将两者分在同一个组，即name的值一样。 checked用来默认选项
 61                     <input type="radio" name="sex" values="woman" id="">女
 62                 </td>
 63             </tr>
 64             <tr>
 65                 <td>出生日期</td>
 66                 <td>
 67                     <input type="date" name="borntime" value="1998-02-04" id="">
                        //用来输入日期 value用来设定初始值

 68                 </td>
 69             </tr>
 70             <tr>
 71                 <td>电子邮箱</td>
 72                 <td>
 73                     <input type="email" name="email" id="">
                       input：Email 用来输入Email，自动检测是否符合Email的格式

 74                 </td>
 75             </tr>
 76             <tr>
 77                 <td>兴趣爱好</td>
 78                 <td>
 79                     <label><input type="checkbox" name="hobby" id="">阅读</label>
 80                     <label><input type="checkbox" name="hobby" id="">运动</label>
 81                     <label><input type="checkbox" name="hobby" id="">网页制作</label>
 82                     <label><input type="checkbox" name="hobby" id="">软件设计</label>
                         lable用来使选项框和文字相关联，鼠标点击文字时也可以选择选项
                         input：checkbox用来多选
                        

 83                 </td>
 84             </tr>
 85             <tr>
 86                 <td>自我介绍</td>
 87                 <td>
 88                     <textarea name="introduction" cols="50" rows="10" id="" placeholder="请输入个人经历"
 89                         style="resize:none"></textarea>
                         textarea用来输入大量文字。其中placeholder可以使指定的文字浅显的显示在输入框中

 90                 </td>
 91             </tr>
 92             <tr>
 93                 <td>常用浏览器</td>
 94                 <td>
 95                     <input list="browsers">//一个下拉框
 96                     <datalist id="browsers">//设置列表。必须使list和id一样，设置在同一组
 97                         <option value="IE"></option>
 98                         <option value="chorme"></option>
 99                         <option value="Firefox"></option>
100                         <option value="Opera"></option>
101                         <option value="Safari"></option>
102                         <option value="Others ..."></option>
103                     </datalist>
104                 </td>
105             </tr>
106             <tr>
107                 <td>电话号码</td>
108                 <td>
109                     <input type="number" name="phonenumber" id="" min="1000000000" max="19999999999" required>
110                 </td>
111             </tr>
112             <tr>
113                 <td colspan="2" align="center">
114                     <input type="submit" value="确定">//两个按钮，发送和重置
115                     <input type="reset" value="重置">
116                 </td>
117                 <!-- <td></td> -->
118             </tr>
119 
120         </table>
121 
122     </form>
123 
124 </body>
125 
126 </html>
posted on 2019-03-17 11:36 Dis羽神阅读(148) 评论(0) 收藏举报