对HTML5标签的认识(四)

时间 2019-12-08

标签 html5 html 标签认识栏目 HTML5 繁體版

原文原文链接

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

1、表单的做用是什么？html

概念：表单在网页中主要是负责对数据信息的采起，表单一共分红三个部分：java

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

二、表单域元素：包含着文本框，和密码框，多行文本框，复选框，单选框，下拉选择框和文件上传框等等元素。编程

三、表单按钮：包括提交的按钮，复位按钮和通常的按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还能够用表单按钮来控制其余定义了处理脚本的处理工做。浏览器

CGI是什么呢？安全

　　CGI是Web服务器运行时外部程序的规范，按CGI编写的程序能够扩展服务器功能。CGI 应用程序能与浏览器进行交互，还可经过数据库API 与数据库服务器等外部数据源进行通讯，从数据库服务器中获取数据。格式化为HTML文档后，发送给浏览器，也能够将从浏览器得到的数据放到数据库中。服务器

2、表单标签的认识编程语言

一、<form>标签post

<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

它们的区别：

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

二、对于get方式，服务器端用Request，QueryString获取变量值，对于post方式，服务器端用Request，Form获取提交的数据。

三、get安全性较低，post安全性较高。

action属性是规定当提交表单时向何处发送表单数据。（大概了解）。

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

运行效果：

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

运行效果：

5、<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，表单中建立按钮。

6、<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>标签能够在不带有任何属性的状况下使用，可是你一般须要使用value属性，此属性会指示被送往服务器的内容。

二、请与select元素配合使用此标签，不然这个标签毫无心义。