HTML5的表单（form）介绍
的表单(form)介绍
HTML 表单(form) 在⽹页中主要负责数据采集功能，利⽤表单可以实现与⽤户的交互，⽐如收集浏览者的信息或实现搜索等功能。
表单(form)标签格式：
<form 表单标签的属性>
表单元素
</form>
【与标签（也叫标记）有关的特性称为属性，每个属性总是对应⼀个属性值，将其称为“属性/值”对，⼀个标签可以有多个属性，由英⽂逗号分隔。】
表单标签的属性
除了通⽤属性 id 、 style 、 class 外，还有：
action：规定当提交表单时，向何处发送表单数据。action取值为：第⼀，⼀个URL（绝对URL/相对URL），⼀般指向服务器端⼀个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理。⽐如<form action="wwwblogs/reg.ashx">，当⽤户提交这个表单时，服务器将执⾏⽹址"wwwblogs/"上的名为"reg.ashx"的⼀般处理程序。第⼆，使⽤mailto协议的URL地址，这样会将表单内容以电⼦邮件的形式发送出去。这种情况⽐较少见的，因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。第三，空值，如果action为空或不写，表⽰提交给当前页⾯。
method：该属性定义浏览器将表单中的数据提交给服务器处理程序的⽅式。关于method的取值，最常⽤的是get和post，如
method="post"。第⼀，使⽤get⽅式提交表单数据，Web浏览器会将各表单字段元素及其数据按照URL参数格式附在<form>标签的action属性所指定的URL地址后⾯发送给Web服务器；由于URL的长度限制，使⽤get⽅式传送的数据量⼀般限制在1KB以下。第⼆，使⽤post⽅式，浏览器会将表单数据作为HTTP请求体的⼀部分发送给服务器。⼀般来说，使⽤post⽅式传送的数据量要⽐get⽅式传递的数据量⼤；根据HTML标准，如果处理表单的服务器程序不会改变服务器上存储的数据，则应采⽤get⽅式（⽐如查询），如果表单处理的结果会引起服务器上存储的数据的变化，则应该采⽤post⽅式（⽐如增删改操作）。第三，其它⽅式（Head、PUT、DELETE、TRACE 或OPTIONS等）。其实，最初HTTP标准对各种操作都规定了相应的method，但后来很多都没有被遵守，⼤部分情况只是使⽤g
et或post就OK。关于更多的各种method⽅式的区别，由于我⽬前对HTTP协议了解的不多，不敢妄下结论。很多园友的讨论也好像不是很深⼊，⼤家争论⽐较多。
target：该属性规定在何处显⽰action属性中指定的URL所返回的结果。取值有_blank（在新窗⼝中打开）、_self（在相同的框架中打开，默认值）、_parent（在⽗框架中打开）、_top（在整个窗⼝中打开）和framename（在指定的框架中打开）。
title：设置⽹站访问者的⿏标放在表单上的任意位置停留时，浏览器⽤⼩浮标显⽰的⽂本。
enctype：规定在发送到服务器之前应该如何对表单数据进⾏编码。取值：默认值为 "application/x-www-form-urlencoded"，在发送到服务器之前，所有字符都会进⾏编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）；“multipart/form-data”：不对字符编码。在使⽤包含⽂件上传控件的表单时，必须使⽤该值。
name：表单的名称。注意和id属性的区别：name属性是和服务器通信时使⽤的名称；⽽id属性是浏览器端使⽤的名称，该属性主要是为了⽅便客户端编程，⽽在css和javascript中使⽤的。
表单元素
Input标签定义输⼊控件。语法：
<input type="input元素类型" name="input元素名称" value="textinput元素的值" />
Input标签属
说明
性
指定元素的类型。text（⽂本框）、password（密码框）、
checkbox（复选框）、radio（单选按钮）、submit（提交按
type checkbox（复选框）、radio（单选按钮）、submit（提交按钮）、reset（重置按钮）、file（⽂件上传）、hidden（隐藏域）、image（图像形式的提交按钮） 和 button（按钮），还有：email（电⼦邮箱）、url（⽹址）、number（数字输⼊框，带微调按钮）、range（滑动条）、date（选取⽇期）、time（选取时间）、datetime（选取⽇期时间）
name指定表单元素的名称
value元素的初始值。type 为 radio时必须指定⼀个值
size 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的⼤⼩以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text 或 password 时，输⼊的最⼤字符数
checked type为radio或checkbox时，指定按钮是否是被选中
select（列表框）
<select> 标签下拉列表
其中的 <option> 标签⽤于定义列表中的可⽤选项。例如：
<select name="contry">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="en">英国</option>
<option value="cn" selected="selected">中国</option>
</select>
textarea（多⾏⽂本域）
<textarea> 标签定义多⾏的⽂本输⼊。可以通过 cols 和 rows 属性来规定 textarea 的列数——宽度（字符数）和⾏数，不过更好的办法是使⽤ CSS 的 height 和 width 属性。
例1、下⾯给出⼀个简单的表单⽰例：
4<meta charset="UTF-8">
5<title>表单⽰例</title>
6</head>
7<body>
8<from>
9输⼊名称:<input type="text" name="user" value=""/><br/>
10输⼊密码:<input type="password" name="passwd" value=""/>
11<br>
12选择性别:<input type="radio" name="sex" vlaue="nan"/> 男 <input type="radio" name="sex" value="nv" checked="checked"/> ⼥13<br>
14选择技术:
15<input type="checkbox" name="tech" value="java"/>Java
16<input type="checkbox" name="tech" value="html"/>html
17<input type="checkbox" name="tech" value="css"/>CSS
18<br>
19选择⽂件:
20<input type="file" name="file" />
21<br>
22⼀个按钮:<input type="button" value="有个按钮" onclick="alert('有个按钮')">
23<br>
24<select name="contry">
25 <option value="none">--选择国家--</option>
26 <option value="usa">美国</option>
27 <option value="en">英国</option>
28 <option value="cn" selected="selected">中国</option>
29</select>
30<br>
31<textarea name="text">可以是多⾏⽂本</textarea>
32<from>
33</body>
34</html>
保存⽂件名为：表单例1.html
运⾏效果如下图：
例2、结合CSS和JavaScript的表单⽰例
4 <meta charset="UTF-8">
5 <title>简单学⽣信息管理</title>
6
7 <!-- 样式 -->
8 <style>
9 table {
10 margin: auto;
11 width: 80%;
12 background-color: #d9ffdc;
13 /* 表格背景⾊ */
14 text-align: center;
15 border-collapse: collapse;
16 }
17 caption {
18 font-size: 28px;
19 line-height: 50px;
20 color: blue;
21 }
22 th {
23 background-color: #00a40c;
24 /* 表头背景⾊ */
25 color: #FFF;
26 /* 表头⽂字颜⾊ */
27
28 }
29 th,td {
30 border: 1px solid #00a40c; padding: 6px;
31 }
32 .btn {
33 color: #FFFFFF;
34 font-size: 16px;
35 font-weight: bold;
36 width: 90px;
37 height: 36px;
38 border-radius: 6px;
39 background-color: forestgreen;
40 }
41 body {
42 text-align: center;
43 }
44 #add {
45 /*width:270px ;
46 height: 290px;*/
47 display: none;
48 position: absolute;
49 border: 1px solid darkgreen;
50 padding:5px 20px 20px 15px;
51 border-radius: 6px;
52 background-color: #d9ffdc;
53 text-align: right;
54 }
55 h3 {
56 text-align: left;
57 }
58 #close{
59 float: right;
60 color: lightcoral;
61 }
62 .text {
63 padding: 0 10px;
64 color: #777777;
65 font-weight: bold;
65 font-weight: bold;
66 margin: 6px;
67 height: 30px;
68 }
69 </style>
70
71 </head>
72 <body>
73 <table id="cj">
74 <caption> 简单学⽣信息表</caption>
html中提交表单用什么属性75 <tr>
76 <th>学号</th>
77 <th>姓名 </th>
78 <th>性别</th>
79 <th>住址</th>
80 <th>删除</th>
81 </tr>
82
83 </table>
84 <input type="button" value="增加" id="addInfo" class="btn" />
85 <!--动态添加表单 -->
86 <div id="add">
87 <h3> 添加信息 <span title="关闭" id="close">Χ</span></h3>
88 <form name="addForm">
89学号：<input name="id" class="text" /><br>
90姓名：<input name="user" class="text" /><br>
91性别：<input name="Gender" class="text" /><br>
92住址：<input name="address" class="text" /><br>
93 <input type="button" value="确定" id="qd" class="btn" />
94 <input type="reset" value="重置" class="btn" />
95 </form>
96 </div>
97<!-- JS -->
98<script>
99 var tab = ElementById('cj');
100 //设置表格奇数⾏和偶数⾏背景颜⾊
101 function strRow() {
102 var len = ws.length;
103 for(var i = 0; i < len; i++)
104 if(i % 2)
105 ws[i].style.backgroundColor = "lightgreen"
106 else
107 ws[i].style.backgroundColor = "#d9ffdc";
108 }
109 strRow();
110 //删除指定⾏
111 function del(r) {
112 var i = r.wIndex;
113 ElementById('cj').deleteRow(i);
114 strRow();
115 }
116 var btQd = ElementById("qd");//通过id属性获取“确定”按钮。
117 var add = ElementById("add");//通过id属性获取“增加信息”对话框。118 var btAdd = ElementById("addInfo");//通过id属性获取“增加”按钮。119 lick = function() {
120 insRow();
121 add.style.display = "none";
122 }
123 lick = function() {
124 add.style.display = "block";
125 show();
126 }
127 //不显⽰（隐藏）动态添加表单
128 ElementById("close").onclick = function() {
129 add.style.display = "none";
130 }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论