7-1.表单-HTML基础 - 码农教程

一、表单

1.表单是什么?

之前我们学的标签做出来都是静态页面，而不是动态的。要想做出一个动态页面，就需要借助表单来实现。 如果一个页面仅仅供用户浏览,那就是静态页面；若这个页面还能实现与服务器进行数据交互（注册登录、话费充值、评论交流），那就是动态页面。表单是我们接触动态页面的第一步，表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。之前学习HTML时仅仅是把登录注册等这些表单页面效果 做出来，址遇服务器是怎么处理这些数据的就不是前端所需要考虑的了，学习HTML只需要把效果做出来就可以了，而不需要管数据处理。

2.表单标签

在HTML中，表单标签有 5 种：

form
input
textarea
select
option

从外观看，表单可划分以下 8 种：

单行文本框
密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表

二、form标签

1.form标签

在HTML表格中，我们都知道表格的tr（行）、th、td（单元格）等都必须放在table标签内部。其实创建一个表单，和创建一个表格一样，我们也必须要把所有表单标签放在form标签内部。但要注意，表单与表格是两个完全不一样的概念，我们常说的表单指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

（1）语法格式

<form> 各种表单标签 </form>

2.form标签属性

（1）form标签常用属性

属性值	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

① name属性

在一个页面中，可能不止一个表单，而每一个form标签就是一个表单。 为了区分众多表单，我们可以使用name属性来给表单进行命名。

Ⅰ.例1

<form name="happy"></form>

② method属性

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。 method属性取值有二：1是get，2是post。

Ⅰ.实际开发

get安全性较差，而post安全性较好，所以在实际开发中，都是使用post。

Ⅱ.例1

<form method="post"></form>

③ action属性

在form标签中，action属性用于指定表单数据提交到哪一个地址进行数据处理。

Ⅰ.例1

<form action="www.php"></form>

④ target属性

在form标签中，target属性与a标签的target属性一样，都是用来指定窗口的打开方式。并且，一般情况下，我们只会使用_blank这一个属性值。

Ⅰ.例1

<form target="_blank"></form>

⑤ enctype属性

在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需设置，除非用到上传文件功能。

三、input标签

在HTML中，大多数表单都是使用input标签来实现。 input标签是自闭和标签。

1.语法格式

<input type="表单类型"/>

（1）type属性取值

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	复选框
button、submit、reset	按钮
file	文件上传

以下的几点，都是基于input标签实现，这些表单类型的不同都是由type属性取值的不同而决定。

四、单行文本框-text

1.是什么?

在HTML中，单行文本框是由input标签实现的，其type属性取值为text。单行文本框常见于注册登录功能。

（1）语法格式

<input type="text" />

① 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单行文本框" action="" method="post">
            <label for="name">尊姓大名:</label><input type="text" id="name"/>
        </form>
    </body>
</html>

单行文本框示例1.png

2.单行文本框属性

（1）单行文本框常用属性

属性	说明
value	设置文本框的默认值，即默认情况下文本框显示的文字。
size	设置文本框的长度。
maxlength	设置文本框中最多可以输入的字符数。

元素属性的定义是没有先后顺序的，你可将value定义在前面，也可定义在后面。

（2）示例

① 例1-value属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单行文本框" action="" method="post">
            <label for="name">芳名几许:</label><input type="text" id="name"/>   <br/>
            <label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁"/>
        </form>
    </body>
</html>

单行文本框value属性示例1.png

value属性用于设置单行文本框中默认的文本，若没有设置，就是空白。

② 例2-size属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单行文本框" action="" method="post">
            <label for="name">芳名几许:</label><input type="text" id="name" size="20" />    <br/>
            <label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁" size="10" />
        </form>
    </body>
</html>

单行文本框size属性示例1.png

Ⅰ.实际开发

size属性可用来设置单行文本框长度，但在实际开发中，一般不会用到此属性，而是用CSS来控制。

③ 例3-maxlength属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="单行文本框" action="" method="post">
            <label for="name">芳名几许:</label><input type="text" id="name" size="20" />     <br/>
            <label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁" />  <br/>
            <label for="age">芳龄几何:</label><input type="text" id="age" value="永远18岁" maxlength="10" />
        </form>
    </body>
</html>

单行文本框maxlength属性示例1.png

限制单行文本框最多输入字符数。

五、密码文本框

1.是什么?

密码文本框在外观上不仅与单行文本框相似，而且两者也拥有相同的属性( value、size、 maxlength等)。

密码文本框与单行文本框区别

不过两者也有着本质上的区别：在单行文本框中输入的字符可见，而在密码文本框中输入的字符不可见。我们可以把密码文本框看成是一种特殊的单行文本框。

（1）语法格式

<input type="password" />

① 示例

Ⅰ.例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表单</title>
    </head>
    <body>
        <form name="密码文本框" action="" method="post">
            <label for="name">用户:</label><input type="text" id="name" />     <br/>
            <label for="passwd">密码:</label><input type="password" id="passwd" />    <br/>
        </form>
    </body>
</html>

密码文本框示例1.png

2.密码文本框属性

（1）密码文本框常用属性

属性	说明
value	设置文本框的默认值，即默认情况下文本框显示的文字。
size	设置文本框的长度。
maxlength	设置文本框中最多可以输入的字符数。

密码文本框这些常用属性和单行文本框一样，就不做示例。

3.密码文本框的好处

密码文本框仅仅使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这个是属于后端做的事情，这里了解一下就行。