html表单制作及实例

下面是HTML表单中常见的元素及其使用方法。

1. 文本输入框（``）

文本输入框用于接收用户输入的文本信息，通过`type`属性设置为`text`。使用`name`属性定义表单元素的名称，该名称作为键存储在服务器接收的表单数据中。

```html

用户名：

```

2. 密码输入框（``）

密码输入框类似于文本输入框，但隐藏用户输入的字符。使用`type`属性设置为`password`即可。

```html

密码：

```

3. 单选按钮（``）

单选按钮用于在多个选项中选择一个。使用`type`属性设置为`radio`，并使用`value`属性设置每个选项的值。

```html

男性：

女性：

```

4. 复选框（``）

复选框用于从多个选项中选择多个或不选择。使用`type`属性设置为`checkbox`，并使用`value`属性设置每个选项的值。

```html

苹果：

香蕉：

```

5. 下拉列表（``和``）下拉列表用于从预定义的选项中选择一个。使用``元素定义下拉列表，使用``元素定义选项。

```html

请选择城市：

上海 北京 广州

```

6. 文本域（``）</p><p>文本域用于接收多行文本输入。使用`<textarea>`元素定义文本域，使用`rows`和`cols`属性设置可见的行数和列数。</p><p> </p><p>```html</p><p><label for="comment">请留言：</label></p><p><textarea id="comment" name="comment" rows="4" cols="40">

```

7. 提交按钮（``）

提交按钮用于提交表单数据到服务器进行处理。使用``元素定义提交按钮，使用`type`属性设置为`submit`。

```html

```

上述是HTML表单中常见的元素及其使用方法的介绍，您可以根据实际需求选择适合的元素进行表单设计。

接下来，我给出一个完整的HTML表单实例，使用了以上提到的各种表单元素。

```html

用户注册

用户名：

密码：

性别：

男性

女性

喜欢的水果：

苹果

香蕉

所在城市：

上海 北京 广州

留言：