网页设计：HTML表单标签

迷南。 2022-12-26 11:25 164阅读 0赞

> 表单包含三个基本组成部分：**表单标签**、**表单域**、**表单按钮**。

#### **1，表单标签** ####

HTML 表单用于收集用户输入，表单使用`<form>` 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。

注意：`<form>`元素是块级元素，其前后会产生折行。

**form表单的属性**：

*  `action="url"`：请求地址，指定form表单向何处发送数据。
 *  `name="login"`：作用是给表单起名，为了便于我们操作。
 *  `enctype ="string"`：规定在发送表单数据之前，如何对表单数据进行编码。通常在使用文件上传时，我们会enctype=“multipart/form-data”，以二进制传输。
 *  `method ="get/post"`：指定表单以何种方式发送到指定的服务器程序，该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值，最常用的是get和post。

#### **2，表单域** ####

要提交数据的表单域必须加name属性。不然，该表单域的数据不会提交到服务器上。

**`<input>`标签**

*  `<input>`用于收集用户信息，根据不同的类型显示不同的形式。input是空标签，它没有结束标签，在开始标签中结束。
 *  `<input>` 元素根据不同的type属性，可以变化为多种形态。
 *  `<input>` 元素设置name属性，用于网络请求时提交对应输入的字段。

**文本框**

定义单行的输入字段，用户可在其中输入文本。它是一个单行文本框，input的默认类型即是text类型。

例：

**密码框**

类型为password时，它用于收集用户输入的密码，在你输入时，浏览器会把输入的内容以符号来代替。

例：

文本框和密码框都可以添加placeholder属性，用于设置输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

**单选框**

类型为radio时，用于定义单选按钮，name属性值相同的input单选框只能有一个被选中。

*  `checked="checked"` 设置默认选中的单选框。
 *  `value="1"`是提交到服务器时给后台程序员们看的。

例：

**复选框**

类型为checkbox时，用于定义复选按钮，复选框允许用户在一定数目的选择中选取一个或多个选项。

例：

**文件上传**

类型为file时，默认为单文件上传。

`multiple="multiple"` 设置为多文件上传。

例：

**隐藏字段**

隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

例：

**下拉列表**

`<select>`元素定义下拉列表;

`<option>`元素定义待选择的选项;

列表通常会把首个选项显示为被选选项，通过添加 selected 属性来定义预定义选项。

例：

<form action="">
        选择您喜欢的水果：
        <select name="select">
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            
            <option selected value="durian">榴莲</option>
        </select>
    </form>

单选按钮、复选框默认选中用：checked属性。

*下拉列表使用：selected属性。*

使用size属性设置下拉列表展开，使用multiple属性设置多选。

**文本域**

`<textarea>` 元素定义多行输入字段（文本域）

cols：规定文本区内的可见宽度。

rows：规定文本区内的可见行数。

文本域可以添加placeholder属性，用于设置输入字段预期值的提示信息。

**`<label>`标签**

label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”。

通过label的for指向按钮的id来绑定，for和id属性的值要相同。

<form action="">
        <label for="userName">请输入用户名:</label>
        <input type="text" id="userName">
    </form>
    <form action="login.jsp">
        性别：
        <label for="man">男：</label>
        <input type="checkbox" id="man">
        <label for="woman">女：</label>
        <input type="checkbox" id="woman">
    </form>

#### **3，表单按钮** ####

**重置按钮**

重置按钮会清除表单中的所有数据。

`value="重置"`设置重置按钮上显示的文字。

**提交按钮**

type=“submit” 定义提交按钮。提交按钮用于向服务器发送表单数据，数据会发送到表单的 action 属性中指定的页面。

`value="提交"`设置提交按钮上显示的文字。

**普通按钮**

button类型的只是一个普通的按钮，而submit有一个提交的作用，在没有加js代码的情况下，button只是个装饰。

**提交按钮**

image类型的input也是具有一个提交的作用，不同的是可以指定一幅图片来作为按钮，不提倡使用image，因为它有时候会提交两次。