欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

对HTML5标签的认识(四)

程序员文章站 2022-07-06 07:52:20
这篇随笔讲讲HTML5中的表单和表单的一些元素 一、表单的作用是什么? 概念:表单在网页中主要是负责对数据信息的采取,表单一共分成三个部分: 1、表单的标签:这里面包含了处理表单的数据所用CGI程序以及数据提交到服务器的方法。 2、表单域元素:包含着文本框,和密码框,多行文本框,复选框,单选框,下拉 ......

这篇随笔讲讲html5中的表单和表单的一些元素

一、表单的作用是什么?

概念:表单在网页中主要是负责对数据信息的采取,表单一共分成三个部分:

1、表单的标签:这里面包含了处理表单的数据所用cgi程序以及数据提交到服务器的方法。

2、表单域元素:包含着文本框,和密码框,多行文本框,复选框,单选框,下拉选择框和文件上传框等等元素。

3、表单按钮:包括提交的按钮,复位按钮和一般的按钮,用于将数据传送到服务器上的cgi脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

cgi是什么呢?

  cgi是web服务器运行时外部程序的规范,按cgi编写的程序可以扩展服务器功能。cgi 应用程序能与浏览器进行交互,还可通过数据库api 与数据库服务器等外部数据源进行通信,从数据库服务器中获取数据。格式化为html文档后,发送给浏览器,也可以将从浏览器获得的数据放到数据库中。

 对HTML5标签的认识(四)

二、表单标签的认识

1、<form>标签

 <form>标签用于为用户输入创建html表单,如下图是最常见的表单:

对HTML5标签的认识(四)

表单能包含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>

运行效果:

对HTML5标签的认识(四)

看到form元素里面的method属性 它有连两个值 set和post

它们的区别:

1、get是从服务器上获取数据,post是向服务器传送数据。

2、对于get方式,服务器端用request,querystring获取变量值,对于post方式,服务器端用request,form获取提交的数据。

3、get安全性较低,post安全性较高。

对HTML5标签的认识(四)action属性是规定当提交表单时向何处发送表单数据。(大概了解

三、<input>标签

定义:<input> 标签规定用户可输入数据的输入字段。

根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。

效果如下:

对HTML5标签的认识(四)

定义input可以在文本框里面输入内容了。

type属性:规定input元素的名称

type属性值默认text值,表示定义一个单行的文本字段(默认宽度为 20 个字符)。

type属性值有很多,如下图:

对HTML5标签的认识(四)

对HTML5标签的认识(四)

做一个两个文本输入框和两个单选按钮还有一个提交按钮的小案例:

 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>

对HTML5标签的认识(四)

运行效果:

对HTML5标签的认识(四)

多选框:

<!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>

运行效果:

对HTML5标签的认识(四)

 

四、<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>

 运行效果:

对HTML5标签的认识(四)

五、<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>标签用于定义列表中的可用选项。

下拉菜单:

对HTML5标签的认识(四)

代码实现:

<!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>

运行效果:

对HTML5标签的认识(四)

<option>

:1、<option>标签可以在不带有任何属性的情况下使用,但是你通常需要使用value属性,此属性会指示被送往服务器的内容。

2、请与select元素配合使用此标签,否则这个标签毫无意义。