前端表单

表单语法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <!--method 表示提交的方式，值为 post 或者 get，不写默认为get-->
 9         <!--在实际开发中，通常使用post提交表达数据，因为使用get提交数据不安全，在浏览器地址栏可以看见用户提交的信息-->
10         <form method="get" action="index2.html">
11             
12             <!--text 文本格式-->
13             <!--maxlength 表示type为text 或 password 时，输入的最大字符数-->
14             账号：<input type ="text" name = "username" maxlength="6" /><br>
15             
16             <!--password 密码格式-->
17             <!--size 表示指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位-->
18             密码：<input type = "password" name = "userpass" size="20" /><br>
19             
20             <!--email 表示电子邮箱框，有简单的判断内容格式-->
21             邮箱：<input type="email" name="email" /><br>
22             
23             <!--url 表示网址框 验证网址格式是否正确-->
24             网址：<input type="url" name="url" /><br>
25             
26             <!--range 表示滑块框 max 最大值    min 最小值    step 步伐，每次修改最小间隔-->
27             滑块框：<input type="range" name="suerrange" min="5" max="30" step="5" /><br>
28             
29             <!--number 数字框，只能书写数字    max 最大值    min 最小值    step 步伐，每次修改最小间隔-->
30             数字框：<input type="number" max="100" min="10" step="10"/><br>
31             
32             <!--redio 单选格式（需要name相同）-->
33             <!--checked 表示type为radio或checkbox时，指定按钮是否是被选中-->
34             <!--value 表示元素的初始值。type 为 radio时必须指定一个值-->
35             <!--label(标记) 被这个标签包括的文字，可以通过 for 对应的 id 实现点击文字，选择表单-->
36             性别：<input type = "radio" name="sex" value = "man" checked="checked"/id = "man"><label for="man">男</label>
37             <input type = "radio" name="sex" value = "wuman" id="wuman"/><label for="wuman">女</label><br>
38             
39             <!--search(搜索) 搜索框      placeholder 表示在内容框里显示提示-->
40             搜索框：<input type="search" name="usersearch" placeholder="请输入搜索内容" /><br>
41             
42             <!--readonly(只读的) 表示value的值不能修改-->
43             只读：<input type="text" name="test" readonly="readonly" value="只读,不可以删除/修改" /><br>
44             
45             <!--select（选择） 下拉框-->
46             省份：<select>
47                 
48                 <!--option 表示下拉框里的内容-->
49                 <option>河南省</option>
50                 <option>河北省</option>
51                 <option>广东省</option>
52             </select>
53             城市：<select>
54                 <option>郑州市</option>
55                 <option>信阳市</option>
56                 <option>石家庄</option>
57                 <option>保定市</option>
58                 <option>东莞市</option>
59                 <option>广州市</option>
60             </select>
61             <br>
62             
63             <!--checkox(多选框) 表示复选框-->
64             爱好：<input type = "checkbox" />打篮球
65             <input type="checkbox" />听音乐
66             <input type="checkbox" />跑步
67             <input type="checkbox" />踢足球
68             <br />
69             
70             <!--file 表示选择文件上传-->
71             <input type="file" />
72             <br>
73             
74             <!--textarea 表示多行文本    rows 行数    cols 列数-->
75             <textarea rows="10" cols="20">
76                 
77             </textarea><br>
78             
79             <!--submit 提交按钮-->
80             <input type="submit" value="提交"/>
81             
82             <!--reset 重置按钮-->
83             <input type="reset" value="重置"/>
84             
85             <!--image 表示图片按钮    src 图片地址-->
86             <input type="image" value="提交" src=""/>
87             
88             <!--隐藏域，用户看不到的信息-->
89             <input type="hidden" />
90             
91             <!--button 普通按钮-->
92             <!--disabled（禁用） 禁用的，表示不可以点击（不是必须选择）-->
93             <input type="button" value="普通按钮" disabled="disabled"/>
94         </form>
95     </body>
96 </html>

表单验证

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <form action="index2.html">    
 9             <!--placeholder 提示用户输入-->
10             <!--required（必需的）不填写，不让提交，相当于一个非空验证-->
11             用户名：<input type="text" name="username" placeholder="请输入您的用户名" required="required" /><br />
12             <!--pattern 验证规则，可以匹配正则表达式-->
13             手机号：<input type="text" name="suerid" pattern="^1[3,5,7,8]\d{9}" /><br>
14             <input type="submit" value="go!" />
15         </form>
16     </body>
17 </html>

 

posted @ 2021-05-06 20:37  青草的骨头  阅读(142)  评论(0)    收藏  举报