第九章：表单元素 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>创建表单</title>
 6     </head>
 7     <body>
 8         <!--form标签用于创建一个表单，会将里面的内容一起发送服务器，结构类似于表格-->
 9         <!--表单中的其它元素都要包含在form标签中-->
10         <!--form元素属性：-->
11             <!--1.必须，action指定表单发送的地址（服务器地址）-->
12             <!--2.method:表单数据发送至服务器的方法，常用的有两种：get/post,默认：get-->
13         
14         
15         <form action="服务器地址" method="get">
16             
17             
18             
19         </form>
20         
21     </body>
22 </html>
9-1 创建表单
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>form元素属性</title>
 6     </head>
 7     <body>
 8         <!--form标签用于创建一个表单，会将里面的内容一起发送服务器，结构类似于表格-->
 9         <!--表单中的其它元素都要包含在form标签中-->
10         <!--form元素属性：-->
11             <!--1.必须，action指定表单发送的地址（服务器地址）-->
12             <!--2.method:表单数据发送至服务器的方法，常用的有两种：get/post,默认：get-->
13             <!--3.name:用来为当前表彰定义一个独一无二的名称，控制表单与后台程序之间的关系-->
14             <!--4.novalidate:设置数据提交时不进行验证,通常不会用到-->
15             <!--5.target:设置目标窗口打开方式,通常不会用到-->
16         
17         <form action="https://www.xxx.net" method="get" name="51zxw" >
18             <input type="text" name="myname" id="uname" value="请输入..." />
19             <input type="submit" value="发送" />            
20         </form>
21         
22     </body>
23 </html>
9-2 form元素属性
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>get/post区别</title>
 6     </head>
 7     <body>
 8         
 9             <!--get/post区别-->
10             <!--get方法提交：数据会附在网址之后提交给服务器，不安全.数据量很小-->
11             
12             <!--post方法提交：数据不会附在网址之后，会将表单中的所有数据进行打包发送服务器，等待服务器读取。安全过程。数据量不受限制。 是使用最多的提交方法.-->
13         
14         
15         <form action="https://www.xxx.net" method="post" name="51zxw" >
16             <input type="text" name="myname" id="uname" value="请输入..." />
17             <input type="submit" value="发送" />            
18         </form>
19         
20     </body>
21 </html>
9-3 get和post区别
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表单发送</title>
 6     </head>
 7     <body>
 8         <!--注意：
 9             1.表单接收程序，放在服务器环境中
10             2.表单发送地址，一定要填写完整，加上http://-->
11         
12         
13         <form action="http://127.0.0.1/51zxw.php" method="post">
14             <input type="text" name="uname"/>
15             <input type="submit" />
16         </form>
17         
18     </body>
19 </html>
9-5 表单发送
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>type和name属性</title>
 6     </head>
 7     <body>
 8         <!--1.input元素是最常用的表单控件-->
 9         <!--2.input元素可以在表单之外使用-->
10         <!--input元素的type属性：(必须要有)
11             1.指定输入内容的类型
12             2.默认为text,单行文本框-->
13         
14         <!--input元素的name属性：(必须要有)
15             1.传递参数时的参数名称
16             2.表单接收找的就是name属性值
17             -->
18             
19         
20         <form action="http://127.0.0.1/51zxw.php" method="post">
21             <input type="text" name="abc"/>
22             <input type="submit" />
23         </form>
24         
25     </body>
26 </html>
9-6 type和name属性
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>value和placeholder属性</title>
 6     </head>
 7     <body>
 8 
 9         <!--input元素的type属性：(必须要有)
10             1.指定输入内容的类型
11             2.默认为text,单行文本框-->
12         
13         <!--input元素的name属性：(必须要有)
14             1.传递参数时的参数名称
15             2.表单接收找的就是name属性值
16             -->
17         <!--input元素的value属性：
18             1.输入框中的默认值
19             2.value值会发送到服务器
20             -->
21             
22         <!--input元素的placeholder属性：
23             1.输入框中的默认值,当文本框获得焦点时被清空
24             2.placeholder中的值不会发送到服务器
25             -->
26         
27         <form action="http://127.0.0.1/51zxw.php" method="post">
28             <!--<input type="text" name="abc" value="请输入..."/>
29             <br />-->
30             <input type="text" name="abc" placeholder="请输入..."/>
31             <input type="submit"  value="确定"/>
32         </form>
33         
34     </body>
35 </html>
9-7 value和placeholder属性
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>maxlength和disabled属性</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)
 9             1.指定输入内容的类型
10             2.默认为text,单行文本框-->        
11         <!--input元素的name属性：(必须要有)
12             1.传递参数时的参数名称
13             2.表单接收找的就是name属性值
14             -->
15         <!--input元素的value属性：
16             1.输入框中的默认值
17             2.value值会发送到服务器
18         -->        
19         <!--input元素的placeholder属性：
20             1.输入框中的默认值,当文本框获得焦点时被清空
21             2.placeholder中的值不会发送到服务器
22             -->
23         <!--input元素的maxlength属性:
24             1.控制输入的最大字数
25             2.包括英文，数字，汉字等
26             -->
27         <!--input元素的disabled属性:
28             1.设置为不可用，不可操作，不能修改，不提交到服务器
29             2.用于格式提示
30             -->
31         
32         
33         <form action="http://127.0.0.1/51zxw.php" method="post">
34             <!--<input type="text" name="abc" placeholder="请输入电话号码" maxlength="11"/>-->
35             格式提示：<input type="text"  placeholder="XX省XX市XX区XX号"  disabled="disabled"/>
36             <br />
37             输入地址：<input type="text" name="abc" placeholder="请输入地址" />
38             <input type="submit"  value="确定"/>
39         </form>
40         
41     </body>
42 </html>
9-8 maxlength和disabled属性
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>autofocus和autocomplete属性</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)
 9             1.指定输入内容的类型
10             2.默认为text,单行文本框-->        
11         <!--input元素的name属性：(必须要有)
12             1.传递参数时的参数名称
13             2.表单接收找的就是name属性值
14             -->
15         <!--input元素的value属性：
16             1.输入框中的默认值
17             2.value值会发送到服务器
18         -->        
19         <!--input元素的placeholder属性：
20             1.输入框中的默认值,当文本框获得焦点时被清空
21             2.placeholder中的值不会发送到服务器
22             -->
23         <!--input元素的maxlength属性:
24             1.控制输入的最大字数
25             2.包括英文，数字，汉字等
26             -->
27         <!--input元素的disabled属性:
28             1.设置为不可用，不可操作，不能修改，不提交到服务器
29             2.用于格式提示
30             -->
31         <!--input元素的autofocus属性:
32             1.让输入框自动获得焦点。
33             2.打开页面以后，光标自动处于编辑状态-->
34         <!--input元素的autocomplete属性:
35             1.属性值：on/off.
36             2.定义是否开启浏览器自动记忆功能-->    
37             
38         
39         <form action="http://127.0.0.1/51zxw.php" method="post">
40         
41             <!--<input type="text" name="abc" placeholder="请输入..." autofocus="autofocus"/>-->
42             <input type="text" name="abc" placeholder="请输入..." autocomplete="off"/>
43             <input type="submit"  value="确定"/>
44         </form>
45         
46     </body>
47 </html>
9-9 autofocus和autocomplete属性
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>单行文本框和密码输入框</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--单行文本框:
11             1.type="text"
12             2.可以输入任何类型的文本，数字，汉字，字母。
13             3.输入的内容以单行显示
14             -->
15         <!--密码输入框:
16             1.type="password"
17             2.输入的字符会以圆点或星号显示
18             3.输入的内容会被隐藏
19             -->    
20 
21         
22         <form action="http://127.0.0.1/51zxw.php" method="post">
23             用户名：<input type="text" name="uname"/>
24             <br />
25             密码：<input type="password" name="password"/>
26             <input type="submit" />
27         </form>
28         
29     </body>
30 </html>
9-10 单行文本框和密码输入框
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>提交按钮和重置按钮</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--提交按钮:
11             1.type="submit"
12             2.点击后将数据发送到服务器
13             3.可以用value改变按钮的名称
14             -->
15         <!--重置按钮:
16             1.type="reset"
17             2.清空输入框中的内容
18             3.可以用value改变按钮的名称
19             -->    
20 
21         
22         <form action="http://127.0.0.1/51zxw.php" method="post">
23             用户名：<input type="text" name="uname"/>
24             <br />
25             密码：<input type="password" name="password"/>
26             <br />
27             <input type="submit" value="发送"/>
28             <input type="reset"  value="重写"/>
29         </form>
30         
31     </body>
32 </html>
9-11 提交按钮和重置按钮
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>普通按钮和隐藏域</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--普通按钮:
11             1.type="button"
12             2.定义的是一个可以点击的按钮，但是没有任何的行为。没有任何的样式
13             3.可以用value改变按钮的名称
14             4.常用于点击按钮时来启动js程序
15             -->
16         <!--隐藏域:
17             1.type="hidden"
18             2.隐藏域不会显示在页面中。一般是网页设计者设置好的数据
19             3.表单提交时，隐藏域中的value会提交到服务器
20             -->    
21 
22         
23         <form action="http://127.0.0.1/51zxw.php" method="post">
24             用户名：<input type="text" name="uname"/>
25             <br />
26             密码：<input type="password" name="password"/>
27             <br />
28             <input type="hidden" name="xjd" value="小家电"/>
29             <br />
30             <input type="submit" />
31             <input type="reset" />
32             
33             <input type="button"  value="普通按钮"/>
34         </form>
35         
36     </body>
37 </html>
9-12 普通按钮和隐藏域
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>数字输入框和活动条</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--数字输入框:
11             1.type="number"
12             2.专门用来输入数字，其它类型不能输入
13             3.min:允许输入的最小值
14             4.max:允许输入的最大值
15             5.step:步长
16             -->
17         <!--活动条:
18             1.type="hidden"
19             2.专门用来输入数字，其它类型不能输入
20             3.min:允许输入的最小值
21             4.max:允许输入的最大值
22             5.step:步长
23             -->    
24 
25         
26         <form action="https://www.xxx.net" method="get">
27             <input type="number" name="abc"  value="10" min="5" max="20" step="5"/>
28             <br />
29             <input type="range" name="bcd"  value="10" min="10" max="80" step="5"/>
30             <br />
31             <input type="submit" />
32             
33         </form>
34         
35     </body>
36 </html>
9-13 数字输入框和活动条
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>时间输入框,颜色选择器和文件域</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--时间输入框:
11             1.type="time/datetime/datetime-local/date/month/week"
12         
13             -->
14         <!--颜色选择器:
15             1.type="color"
16             
17             -->    
18         <!--文件域:
19             1.type="file"
20             2.用于文件上传
21             3.accept：规定选取文件类型
22             4.multiple：规定一次允许选择多个文件
23             -->    
24         
25         <form action="https://www.xxx.net" method="get">
26             <input type="datetime-local" name="abc" />
27             <br />
28             <input type="color" name="bcd"  />
29             <br />
30             <input type="file" name=""  accept="image/jpeg" multiple="multiple"/>
31             <br />
32             <input type="submit" />
33             
34         </form>
35         
36     </body>
37 </html>
9-14 时间输入框,颜色选择器和文件域
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>单选框</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--单选框:
11             1.type="radio"
12             2.name属性值必须设置成相同属性值(很关键)
13             3.向服务器发送的是value值
14             4.可以通过checked设置默认选取状态，再次单击取消选取
15             -->    
16         
17         <form action="https://www.xxx.net" method="get">
18             姓别：<input type="text" name="uname" />
19             <br />
20             性别：
21                 <input type="radio" name="sex" value="1" />男
22                 <input type="radio" name="sex" value="0" checked/>女
23                 <input type="radio" name="sex" value="10" />人妖
24             <br />
25             <input type="submit" />
26             
27         </form>
28         
29     </body>
30 </html>
9-15 单选框
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>复选框</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--复选框:
11             1.type="checkbox"
12             2.name属性值必须设置成相同属性值,在属性值后加上中括号(很关键)
13             3.向服务器发送的是value值
14             4.可以通过checked设置默认选取状态，再次单击取消选取
15             -->    
16         
17         <form action="http://127.0.0.1/51zxw2.php" method="post">
18             姓别：<input type="text" name="uname" />
19             <br />
20             喜欢的水果：
21                 <input type="checkbox" name="sg[]" value="pg" />苹果
22                 <input type="checkbox" name="sg[]" value="xj" />香蕉
23                 <input type="checkbox" name="sg[]" value="pt" />葡萄
24             <br />
25             <input type="submit" />
26             
27         </form>
28         
29     </body>
30 </html>
9-16 复选框
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>网址输入框</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--电子邮箱输入框:
11             1.type="email"
12             2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
13             -->
14         <!--网址输入框:
15             1.type="url"
16             2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
17             3.输入的网址一定要包含协议（http://或者https://）
18             -->    
19 
20         
21         <form action="https://www.xxx.net" method="get">
22             单行输入：<input type="text" name="abc" />
23             <br />
24             电子邮箱：<input type="email" name="email"/>
25             <br />
26             网址：<input type="url" name="url"/>
27             <br />
28             <input type="submit" />
29             
30         </form>
31         
32     </body>
33 </html>
9-17 电子邮箱和网址输入框
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表单验证属性</title>
 6     </head>
 7     <body>
 8         <!--input元素的type属性：(必须要有)-->    
 9         
10         <!--pattern属性:
11             1.规定输入字符的模式
12             2.模式指的是：正则表达式            
13             -->
14         <!--required属性:
15             1.规定必须在提交前填写输入字段，不填写不能提交
16             -->    
17 
18         
19         <form action="https://www.xxx.net" method="get">
20             <!--单行输入：<input type="text" name="abc" pattern="[a-z]{5}"/>-->
21             <br />
22             单行输入：<input type="text" name="abc" placeholder="必须填写" required/>
23             <input type="submit" />
24             
25         </form>
26         
27     </body>
28 </html>
9-18 表单验证属性
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>多行文本输入框</title>
 6     </head>
 7     <body>
 8         <!--多行文本输入框:
 9             1.textarea标签
10             2.文本输入区域可以容纳无限数量的文本
11             3.多行文本输入框和单行文本输入框的属性差不多
12             4.不要使用rows和cols设置多行文本输入框的行数和列数。应使用css设置宽高
13             5.多行文本输入框可以在表单之外使用
14             -->
15         
16         
17         
18         <!--<input type="text"  />-->
19         
20         <textarea name="" style="width: 200px;height: 150px;"></textarea>
21         
22     </body>
23 </html>
9-19 多行文本输入框
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉列表</title>
 6     </head>
 7     <body>
 8         <!--select:
 9             1.表示创建下拉列表
10             2.size属性设置列表中显示多少个列表项
11         
12         
13         option：
14             1.表示每一个下拉列表项
15             2.往服务器中发送的是value值
16         
17         
18         -->
19         
20         <form action="https://www.xxx.net" method="get">
21             <select name="abc" size="3" >
22                 <option value="a">辽宁</option>
23                 <option value="b">吉林</option>
24                 <option value="c">黑龙江</option>    
25                 <option value="d">四川</option>
26                 <option value="e">云南</option>
27                 <option value="f">贵州</option>    
28             </select>
29             <input type="submit" value="提交"/>
30         </form>
31         
32         
33         
34         
35         
36     </body>
37 </html>
9-20 下拉列表
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉列表分组</title>
 6     </head>
 7     <body>
 8         <!--select:
 9             1.表示创建下拉列表
10             2.size属性设置列表中显示多少个列表项
11             3.multiple属性可以定义多选
12             4.多选时，name属性值后应加上"[]".
13         
14         option：
15             1.表示每一个下拉列表项
16             2.往服务器中发送的是value值
17         
18         optgroup：
19             1.用来对option进行分组
20             2.label属性设置分组名称
21         -->
22         
23         <form action="http://127.0.0.1/51zxw3.php" method="post">
24             到过的省市：<br />
25             <select name="abc[]" size="3" multiple>
26                 <optgroup label="东北">
27                     <option value="a">辽宁</option>
28                     <option value="b">吉林</option>
29                     <option value="c">黑龙江</option>    
30                 </optgroup>
31                 <optgroup label="西南">
32                     <option value="d">四川</option>
33                     <option value="e">云南</option>
34                     <option value="f">贵州</option>    
35                 </optgroup>
36             </select>
37             <input type="submit" value="提交"/>
38         </form>
39         
40         
41         
42         
43         
44     </body>
45 </html>
9-21 下拉列表分组
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>button按钮</title>
 6     </head>
 7     <body>
 8         <!--button按钮：
 9             1.type属性：可以设置三个值，submit/reset/button,含义和input按钮一样
10             2.name/vlue/disable属性，与input的用法一样
11             3.button标签是双标签，进行更加复杂的样式设计
12             4.注意：表单中请使用input按钮，表单外使用button按钮。
13             -->
14         
15         
16         
17         <form action="https://www.xxx.net" method="get">
18             <input type="text" name="abc" />
19             <br />
20             <input type="submit" value="提交"/>
21             <input type="reset" value="重置"/>
22             <input type="button" value="普通"/>
23             <br /><br />
24             <button type="submit">提交</button>
25             <button type="reset">重置</button>
26             <button type="submit" style="border-radius:50% ; overflow: hidden; border: none; width: 50px;height: 50px;padding: 0;">
27                 <img src="btn.jpg" width="50" height="50"/>
28             </button>
29         </form>
30         
31         
32     </body>
33 </html>
9-22 button按钮

 

posted @ 2020-08-06 07:51  菜逼学飞  阅读(64)  评论(0)    收藏  举报