HTML表单基础

一、表单的基本结构

HTML表单是用来收集用户输入信息的工具，它的基本结构如下：

<form action="提交地址" method="提交方式">
<!-- 表单元素 -->
</form>

其中，`action`属性指定了表单提交的地址，`method`属性指定了表单提交的方式，常用的方式有`GET`和`POST`。

例如，下面的代码展示了一个简单的表单，它的提交地址是`/submit`，提交方式是`POST`：

<form action="/submit" method="POST">
<!-- 表单元素 -->
</form>

复制代码运行试试看?

点我尝试运行

二、表单的元素

HTML表单中常用的元素有：

1. input元素

<input>元素是最常用的表单元素之一，它可以用来接收用户的各种输入，例如文本、密码、单选框、复选框、按钮等。`<input>`元素的常用属性有：

– type：指定输入框的类型，常用的类型有`text`、`password`、`radio`、`checkbox`、`submit`等。
– name：指定输入框的名称，用于后台处理表单数据。
– value：指定输入框的默认值。
– checked：用于单选框和复选框，指定是否默认选中。
– disabled：指定输入框是否禁用。
– readonly：指定输入框是否只读。
– maxlength：指定输入框的最大长度。
– size：指定输入框的宽度。

例如，下面的代码展示了一个文本输入框和一个提交按钮：

<form action="/submit" method="POST">
<label>用户名：<input type="text" name="username"></label>
<input type="submit" value="提交">
</form>

2. select元素

<select>元素用于创建下拉列表框，用户可以从列表中选择一个选项。`<select>`元素的常用属性有：

– name：指定下拉列表框的名称，用于后台处理表单数据。
– size：指定下拉列表框的可见选项数。
– multiple：指定是否允许多选。

<select>元素中的选项使用`<option>`元素来定义，`<option>`元素的常用属性有：

– value：指定选项的值。
– selected：指定是否默认选中。

例如，下面的代码展示了一个下拉列表框：

<form action="/submit" method="POST">
<label>性别：
<select name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
</label>
<input type="submit" value="提交">
</form>

复制代码运行试试看?

点我尝试运行

3. textarea元素

`<textarea>`元素用于创建多行文本输入框，用户可以在其中输入多行文本。`<textarea>`元素的常用属性有：

– `name`：指定多行文本输入框的名称，用于后台处理表单数据。
– `rows`：指定多行文本输入框的行数。
– `cols`：指定多行文本输入框的列数。

例如，下面的代码展示了一个多行文本输入框：

<form action="/submit" method="POST">
<label>留言：
<textarea name="message" rows="5" cols="30"></textarea>
</label>
<input type="submit" value="提交">
</form>

复制代码运行试试看?

点我尝试运行

4. button元素

`<button>`元素用于创建按钮，可以用来提交表单、重置表单或执行其他操作。`<button>`元素的常用属性有：

– `type`：指定按钮的类型，常用的类型有`submit`、`reset`、`button`等。
– `name`：指定按钮的名称，用于后台处理表单数据。
– `value`：指定按钮的值。

例如，下面的代码展示了一个提交按钮和一个重置按钮：

<form action="/submit" method="POST">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

复制代码运行试试看?

点我尝试运行

5. label元素

`<label>`元素用于为表单元素定义标签，用户点击标签时，关联的表单元素会获得焦点。`<label>`元素的常用属性有：

– `for`：指定关联的表单元素的`id`属性。

例如，下面的代码展示了一个带有标签的文本输入框：

<form action="/submit" method="POST">
<label for="username">用户名：</label>
<input type="text" name="username" id="username">
<input type="submit" value="提交">
</form>

复制代码运行试试看?

点我尝试运行

6. fieldset和legend元素

`<fieldset>`元素用于将表单元素分组，`<legend>`元素用于为分组定义标题。`<fieldset>`元素的常用属性有：

– `name`：指定分组的名称，用于后台处理表单数据。

例如，下面的代码展示了一个分组的表单：

<form action="/submit" method="POST">
<fieldset>
<legend>个人信息</legend>
<label>姓名：<input type="text" name="name"></label>
<label>年龄：<input type="text" name="age"></label>
</fieldset>
<input type="submit" value="提交">
</form>

复制代码运行试试看?

点我尝试运行

三、表单的属性

除了上述元素的属性外，HTML表单还有一些常用的属性，例如：

1. `enctype`属性

`enctype`属性用于指定表单数据的编码方式，常用的编码方式有`application/x-www-form-urlencoded`和`multipart/form-data`。如果表单中包含文件上传等二进制数据，需要使用`multipart/form-data`编码方式。

例如，下面的代码展示了一个使用`multipart/form-data`编码方式的表单：

<form action="/submit" method="POST" enctype="multipart/form-data">
<label>上传文件：<input type="file" name="file"></label>
<input type="submit" value="提交">
</form>

复制代码运行试试看?

点我尝试运行

2. `autocomplete`属性

`autocomplete`属性用于指定表单是否启用自动完成功能，常用的取值有`on`和`off`。

例如，下面的代码展示了一个禁用自动完成功能的表单：

<form action="/submit" method="POST" autocomplete="off">
<!-- 表单元素 -->
</form>

复制代码运行试试看?

点我尝试运行

以上就是HTML表单的基本结构、元素和属性的介绍.