对HTML5标签的认识(四)
这篇随笔讲讲html5中的表单和表单的一些元素
一、表单的作用是什么?
概念:表单在网页中主要是负责对数据信息的采取,表单一共分成三个部分:
1、表单的标签:这里面包含了处理表单的数据所用cgi程序以及数据提交到服务器的方法。
2、表单域元素:包含着文本框,和密码框,多行文本框,复选框,单选框,下拉选择框和文件上传框等等元素。
3、表单按钮:包括提交的按钮,复位按钮和一般的按钮,用于将数据传送到服务器上的cgi脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
cgi是什么呢?
cgi是web服务器运行时外部程序的规范,按cgi编写的程序可以扩展服务器功能。cgi 应用程序能与浏览器进行交互,还可通过数据库api 与数据库服务器等外部数据源进行通信,从数据库服务器中获取数据。格式化为html文档后,发送给浏览器,也可以将从浏览器获得的数据放到数据库中。
二、表单标签的认识
1、<form>标签
<form>标签用于为用户输入创建html表单,如下图是最常见的表单:
表单能包含input元素比如文本字段,复选框,单选框,提交按钮等等
表单的主要作用就是传输数据给服务器。
定义一个简单的表单:
<!doctype html> <html> <head> <title>form</title> <head> <body> <form action="" method="get/post"> <p>姓名:<input type="text" name="txtname" /></p> <p>年龄:<input type="text" name="txtname" /></p> <input type="submit" value="提交" /> </form> </body> </html>
运行效果:
看到form元素里面的method属性 它有连两个值 set和post
它们的区别:
1、get是从服务器上获取数据,post是向服务器传送数据。
2、对于get方式,服务器端用request,querystring获取变量值,对于post方式,服务器端用request,form获取提交的数据。
3、get安全性较低,post安全性较高。
action属性是规定当提交表单时向何处发送表单数据。(大概了解)。
三、<input>标签
定义:<input> 标签规定用户可输入数据的输入字段。
根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
效果如下:
定义input可以在文本框里面输入内容了。
type属性:规定input元素的名称
type属性值默认text值,表示定义一个单行的文本字段(默认宽度为 20 个字符)。
type属性值有很多,如下图:
做一个两个文本输入框和两个单选按钮还有一个提交按钮的小案例:
1 <!doctype html> 2 <html> 3 <head> 4 <title>form</title> 5 <head> 6 <body> 7 <form action="" method="get"> 8 <!--name属性是定有一个input元素的名称--> 9 <!--文本输入框--> 10 <p>姓名:<input type="text" name="txtname"></p> 11 <p>年龄:<input type="password" name="txtage"></p> 12 <!--单选按钮的属性值为radio,当你要定义单选按钮时就用radio属性值--> 13 <!--单选按钮--> 14 <p>性别:<input type="radio" name="sex">男 15 <input type="radio" name="sex">女</p> 16 <!--提交按钮--> 17 <input type="submit" value="提交" /> 18 19 </form> 20 </body> 21 </html>
input有很多属性,比如id,name,type,checked,size,max,min,height,form,width,value,list这些经常用的到的属性。
就拿checked属性来说,我们在注册一个账号的时候经常能看到性别选项,按照人口惯例,是男性的概率偏多,所以在选择中时为了方便,我们可以给它一个默认选中男性(当然也可以现在女性),这样让用户的体验更好。
代码实现:
1 <!doctype html> 2 <html> 3 <head> 4 <title>form</title> 5 <head> 6 <body> 7 <form action="" method="get"> 8 <!--name属性是定有一个input元素的名称--> 9 <!--文本输入框--> 10 <p>姓名:<input type="text" name="txtname"></p> 11 <p>年龄:<input type="password" name="txtage"></p> 12 <!--单选按钮的属性值为radio,当你要定义单选按钮时就用radio属性值--> 13 <!--单选按钮--> 14 <p>性别:<input type="radio" name="sex" checked="checked" >男 15 <input type="radio" name="sex">女</p> 16 <!--提交按钮--> 17 <input type="submit" value="提交" /> 18 19 </form> 20 </body> 21 </html>
运行效果:
多选框:
<!doctype html> <html> <head> <title>textarea</title> <head> <body> <p>爱好:<input type="checkbox" name="游泳" >游泳 <input type="checkbox" name="唱歌">唱歌 <input type="checkbox" name="篮球">篮球 <input type="checkbox" name="跳舞">跳舞 </p> </body> </html>
运行效果:
四、<textarea>标签
定义:<textarea>标签定义多行的文本输入控件。文本中可容纳无限数量的文本,可通过clos和rows属性来规定textarea的尺寸,不过更好的办法就是使用css的height和width属性。
<!doctype html> <html> <head> <title>textarea</title> <head> <body> <textarea rows="3" cols="20">textarea标签是多行的文本输入控件。可通过rows和cols来改变尺寸</textarea> </body> </html>
运行效果:
五、<button>标签
定义:<button>标签是定义一个按钮。在button元素的内部,你可以放置内容,比如文本,图像,这是该元素于使用input元素创建的按钮之间的不同之处。相比<input type=" ">有更强大的功能和更丰富的内容。
请始终为按钮规定type属性,属性 internet explorer 的默认类型是button 而其他的浏览器中的默认值是“submit”。
定义一个按钮:
<!doctype html> <html> <head> <title>textarea</title> <head> <body> <button type="button">点击</button> </body> </html>
注意:如果在html表单中使用button元素,不同的浏览器会提交不同的按钮值,请使用input元素在html,表单中创建按钮。
六、<select>标签
定义:select元素可创建单选多选菜单,<select>元素中的<option>标签用于定义列表中的可用选项。
下拉菜单:
代码实现:
<!doctype html> <html> <head> <title>textarea</title> <head> <body> <select> <option value="html5">html5网页编程语言</option> <option value="css">css样式</option> <option value="java编程">java编程</option> <option value="javascript">javascript</option> </select> </body> </html>
运行效果:
<option>
注:1、<option>标签可以在不带有任何属性的情况下使用,但是你通常需要使用value属性,此属性会指示被送往服务器的内容。
2、请与select元素配合使用此标签,否则这个标签毫无意义。