HTML 表单

Like_Frost
673 阅读6分钟

使用之前学习过的标签可以做出静态界面，但要想实现与后端进行交互的动态界面需要借助表单，如文本框、按钮、下拉菜单等。

在 HTML 中，有五种表单标签：form、input、textarea、select 和 option；从外观上来划分，表单可分为单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表 8 种。

一、form 标签

1、标签简介

在创建一个表单后，需要把所有的表单标签放入 form 内部，使用方式：<form> </form>，我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

2、标签属性

常用标签属性如下：

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

  • name 属性：为了区分多个表单，可以使用 name 属性给表单命名；使用方式：<form name="myForm"> </form>

  • method 属性：用于指定表单数据项提交使用哪种 http 方式，有两种方式可以选择：get 和 post，关于这两种方式的区别，会专门使用一篇新的文章来解释（先开个坑）；使用方式：<form method="post"> </form>

  • action 属性：用于指定表单数据提交到哪个地址进行处理；

  • target 属性：与 a 标签中的 target 属性作用相同，都是用来指定窗口打开的方式；

  • enctype 属性：用于指定表单数据提交的编码方式，表单数据默认会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

属性值处理方式
application/x-www-form-urlencoded在发送前编码所有字符（默认）
multipart/form-data不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
text/plain空格转换为 "+" 加号，但不对特殊字符编码。

二、input 标签

大多数表单都是使用 input 标签来实现的，其是自闭合标签，基本使用方式：<input type=""/>，type 属性值见下表：

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

三、单行文本框

1、文本框简介

单行文本框使用 input 标签实现，其中 type 属性值为 text，有如下代码：

    <form>
        姓名：<input type="text"/>
    </form>

在浏览器中显示为：

image.png

2、文本框属性

  • value 属性：设置文本框的默认值，如<input type="text" value="Like_Frost"/>，在浏览器中效果如下：

image.png

  • size 属性：设置文本框的长度，有如下代码：
        <form>
            姓名：<input type="text" size="10"/>
            <br/>
            姓名：<input type="text" size="20"/>
        </form>

在浏览器中效果如下：

image.png

  • maxlength 属性：设置文本框可输入的最大字符数，有如下代码：
        <form>
            姓名：<input type="text" maxlength="6"/>
            <br/>
            姓名：<input type="text"/>
        </form>

在浏览器中显示为：

image.png

上面的文本框可接受的最大长度为 6

四、密码文本框

可以将密码文本框看作是一个特殊的单行文本框，它与单行文本框的外观相似，属性相同，只不过密码文本框的文字不可见。使用方式：<input type="password"/>，有如下代码：

    <form>
        密码：<input type="password"/>
    </form>

在浏览器中显示为：

image.png

注： 密码文本框的文本框属性和单行文本框相同，此处不再赘述。

五、单选框

单选框使用 input 标签实现，基本用法：<input type="radio" name="" value=""/>，name 为单选按钮所在的组名，value 表示单选按钮的取值，为必需属性；有如下代码：

        <form>
            性别：
            <input type="radio" name="gender" value="男"/>男
            <input type="radio" name="gender" value="女"/>女
        </form>

在浏览器中显示为：

image.png

若想让某一项默认选中，可以在 input 标签中添加 checked 属性，如 <input type="radio" name="gender" value="女" checked/>女，也可以写为： <input type="radio" name="gender" value="女" checked="checked"/>女

注： name 属性一定要加，相同 name 表示一个组，在组内的各个选项是互斥的，如果没有对其加上 name 属性或者两个选择框的 name 属性不一致，会出现两个选择框都可以选中的现象，比如下面这段代码：

        <form>
            性别：
            <input type="radio" value="男"/>男
            <input type="radio" value="女"/>女
        </form>

会出现两个单选框都可以被选中的效果：

image.png

为了更好的语义化，常把 input 和其提示文字放在 label 标签中：

    <label>
        <input type="radio" value="男"/>男
    </label>
    <label>
        <input type="radio" value="女"/>女
    </label>

六、复选框

复选框也是使用 input 标签来实现的，其中 type 的取值为 checkbox，基本用法：<input type="checkbox" name="" value=""/>，有如下代码：

        <form>
            喜欢上的课：
            <input type="checkbox" value="数学"/>数学
            <input type="checkbox" value="语文"/>语文
            <input type="checkbox" value="英语"/>英语
        </form>

在浏览器中显示为：

image.png

默认选中的选项也是使用 checked 属性。

七、按钮

一般有三种按钮：普通按钮、提交按钮、重置按钮。

1、普通按钮

使用方式：<input type="button" value=""/>，value 的取值就是按钮上显示的文字，一般配合 JS 来完成某些功能。

2、提交按钮

用来给服务器提交数据，使用方式：<input type="submit" value=""/>，提交按钮和普通按钮在外观上没有不同，区别在于他们的功能上。

3、重置按钮

用于清除用户在表单上输入的内容，仅限于 form 标签内部的输入框，使用方式：<input type="reset" value=""/>，有如下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <script>
            window.onload = function(){
                var but = document.getElementById("But");
                but.onclick = function(){
                    alert("输入框已重置");
                }
            }
        </script>
    </head>
    <body>
        <form>
            <label> 账号 ：<input type="text"/></label><br/>
            <label> 密码 ：<input type="password"/></label><br/>
            <input type="reset" value="重置" id="But"/>
        </form>
    </body>
</html>

当点击重置按钮后，会清空输入表单，并弹出提示框：

image.png

对于以上三种按钮，也可以使用按钮标签来实现，其使用方式为<button> </button>，但是在不同的浏览器中，使用 button 标签会提交不同的 value 值，所以尽量使用 input 标签。

八、文件上传

在页面设计过程中，有时候会有上传文件的需求，可以使用 input 标签来实现，使用方式：<input type="file"/>，在浏览器中效果如下：

image.png

九、多行文本框

多行文本框可以输入多行本文，使用 textarea 标签实现，使用方式：<textarea rows="" cols=""> 默认显示文字 </textarea>，rows 和 cols 用来指定多行文本框所占的行和列数，默认显示文字在标签内部设定，有如下代码：

    <body>
        <textarea rows="10" cols="20">这是一个多行文本框</textarea>
    </body>

在浏览器中显示为：

image.png

十、下拉列表

1、下拉列表简介

下拉列表使用 select 和 option 两个标签配合使用，示例：

        <select>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            <option>选项4</option>
        </select>

在浏览器中显示如下：（在默认情况下只显示第一个选项，下拉后可查看完整选项）

image.png

2、select 标签属性

  • multiple：设置下拉列表可以选择多项，直接写在 select 标签内部，<select multiple> </select>, 可以使用 Ctrl+鼠标左键选取多项；

  • size：整数值，设置下拉列表最多显示几项，Chrome 浏览器最少为 4 ，<select size="4"> </select>，在浏览器中效果：

image.png

3、option 标签属性

  • selected：是否选中，直接写在 option 标签中，<option selected> </option>；
  • value：选项值 有如下示例：
        <select>
            <option>选项1</option>
            <option>选项2</option>
            <option selected>选项3</option>
            <option>选项4</option>
            <option>选项5</option>
        </select>

在浏览器中显示为：

image.png

若将其展开（select 标签显示多行），效果为：

image.png

avatar
文章
阅读
粉丝