HTML5-从0开始学习之表单属性详解

悠悠 2022-05-03 14:26 205阅读 0赞

## 什么是表单？ ##

## 表单是网页中数据采集的工具。 ##

## 表单组成部分由三部分组成： ##

### （一）表单标签<form> ###

### （二）表单域<input> ###

### （三）表单按钮<button> ###

现在我们来逐步解释这三部分。

## （一）表单标签<form> ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70][]

效果如上所示，

### <form> 标签用于为用户输入创建 HTML 表单。 ###

### 表单能够包含 [input 元素][input]，比如文本字段、复选框、单选框、提交按钮等等。 ###

下面是form标签的属性，不再一一论述：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 1][]

## （二）表单域<input> ##

我们先来介绍input标签常用的属性：

## <type>：元素的类型，如text文本框，radio单选按钮，select下拉框等； ##

## <name>：元素的名称，主要用于与服务器端数据传送； ##

## <value>：元素的默认值； ##

## <size>：以字符计算的元素可见宽度，不是像素或百分比； ##

## <maxlength>：元素允许的最大字符长度； ##

## <disabled>禁用该控件，这个时候既不能选择，也不能点击； ##

## <readonly>：该控件字段内容只读，不能修改。 ##

姓名:<input type="text" name="abc" value="ABJun">

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 2][]

## （三）表单按钮<button> ##

<button type="button">click it!</button>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 3][]

<button> 标签定义一个按钮。

下面是button标签的属性：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70]: /images/20220503/f5202f75c72c4c83a320a49021cd101c.png
[input]: http://www.w3school.com.cn/tags/tag_input.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 1]: /images/20220503/992f78b17ba4408ca6e33353c610dfbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 2]: /images/20220503/33e4dbeb634741a48599ac80cbc80e56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 3]: /images/20220503/ca78c60082cb40f4ad1cc282e3b61d97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 4]: /images/20220503/6cb64a01a07b4c5dad5d2b54b2cb656c.png