HTML 表单
表单用于从站点访问者收集一些数据时。
表单将接受来自站点访问者的输入，然后将其发布到后端应用程序，如CGI、ASP脚本或PHP脚本等。
后端应用程序将根据应用程序内部定义的业务逻辑对传递的数据执行所需的处理。
有各种各样的表单元素可用，如文本字段、文本区域字段、下拉菜单、单选按钮、复选框等。
HTML<form>标记用于创建HTML表单
<form action = "Script URL" method = "GET|POST"> 表单元素 比如： input, textarea 等等。 </form>
表单属性
最常用的表单属性：
| 属性 | 说明 |
|---|---|
| action | 处理传递数据的后端脚本 |
| method | 上传数据的方法。最常用的是GET和POST方法。 |
| target | 指定将在其中显示脚本结果的目标窗口或帧。例如：_blank, _self, _parent等 |
| enctype | 编码方式, 指定浏览器在将数据发送到服务器之前如何对数据进行编码。 application/x-www-form-urlencoded-这是大多数表单在简单场景中使用的标准方法。 mutlipart/form-data-当我们希望以文件形式(如图像、word文件等)上载二进制数据时，使用此选项。 |
HTML表单控件
有不同类型的表单控件可用于使用HTML表单收集数据：
文本输入控件
复选框控件
单选控件
选择框控件
文件选择框
隐藏控件
可点击按钮
提交和重置按钮
文本输入控件
有三种类型的文本输入框：
- 单行文本输入控件-此控件用于只需要一行用户输入的项目，例如搜索框或名称。它们是使用HTML
<input>标记创建的。 - 密码输入框控件-这也是一个单行文本输入，但它会在用户输入时屏蔽字符。它们也是使用HTMl
<input>标记创建的。 - 多行文本输入框-当需要多行输入时，用户可能需要使用多行文本。多行输入控件是使用HTML
<textarea>标记创建的。
单行文本输入控件
此控件用于只需要一行用户输入的项，例如搜索框或名称。它们是使用HTML<input>标记创建的。
<form > 用户名: <input type = "text" name = "username" /> <br> 邮箱: <input type = "text" name = "email" /> </form>
单行文本输入控件属性
下面是用于创建文本字段的<input>标记的属性列表。
| 属性 | 说明 |
|---|---|
| type | 指示输入控件的类型，对于文本输入控件，它将被设置为text。 |
| name | 用于给发送到服务器以识别并获取值的控件的名称。 |
| value | 这可用于在控件内提供初始值。 |
| size | 指定文本输入控件的宽度。以字符为单位 |
| maxlength | 指定用户可以在文本框中输入的最大字符数。 |
密码输入框控件
这也是一个单行文本输入，但一旦用户输入字符，它就会屏蔽字符。它们也使用HTML<input>标记创建，但type属性设置为password。
密码输入框控件示例
这里是一个用于获取用户密码的单线密码输入的基本示例–
<form > 用户名: <input type = "text" name = "username" /> <br> 密码: <input type = "password" name = "password" /> </form>
密码输入框控件属性
以下属性列表用于创建<password>。
| 属性 | 说明 |
|---|---|
| type | 指示输入控件的类型，对于密码输入控件，它将设置为password。 |
| name | 用于给发送到服务器以识别并获取值的控件的名称。 |
| value | 这可用于在控件内提供初始值。 |
| size | 指定文本输入控件的宽度。以字符为单位 |
| maxlength | 指定用户可以在文本框中输入的最大字符数。 |
多行文本输入控件
当要求用户提供可能超过一个句子的信息时，使用此选项。
多行输入控件是使用HTML<textarea>标记创建的。
多行文本输入控件示例
<form>
描述 : <br />
<textarea rows = "5" cols = "50" name = "description">
请在这里输入意见和建议。
</textarea>
</form>
多行文本输入控件属性
下面是<textarea>标记的属性列表。
| 属性 | 说明 |
|---|---|
| name | 用于给发送到服务器以识别并获取值的控件的名称。 |
| rows | 指示文本区域框的行数。 |
| cols | 指示文本区域框的列数 |
复选框控件
当需要选择多个选项时，使用复选框。它们也是使用HTML<input>标记创建的，但type属性设置为checkbox。
复选框控件示例
<form> <input type = "checkbox" name = "banana" value = "on"> 香蕉 <input type = "checkbox" name = "apple" value = "on"> 苹果 <input type = "checkbox" name = "orange" value = "on"> 橘子 </form>
复选框控件属性
下面是<checkbox>标记的属性列表。
| 属性 | 说明 |
|---|---|
| type | 指示输入控件的类型，对于checkbox输入控件，它将被设置为checkbox。。 |
| name | 用于给发送到服务器以识别并获取值的控件的名称。 |
| value | 选中该复选框时将使用的值。 |
| checked | 如果要在默认情况下选择它，请将其设置为checked。 |
单选按钮控件
单选按钮用于在许多选项中只需选择一个选项。它们也使用HTML<input>标记创建，但type属性设置为radio。
单选按钮控件示例
<form> <input type = "radio" name = "subject" value = "man"> 男 <input type = "radio" name = "subject" value = "woman"> 女 </form>
单选按钮控件属性
以下是单选按钮的属性列表。
| 属性 | 说明 |
|---|---|
| type | 指示输入控件的类型，对于复选框输入控件，它将被设置为单选。 |
| name | 用于给发送到服务器以识别并获取值的控件的名称。 |
| value | 选中单选框时将使用的值。 |
| checked | 如果要在默认情况下选择它，请将其设置为checked。 |
选择框控件
选择框也称为下拉框，以下拉列表形式列出各种选项，用户可以从中选择一个或多个选项。
选择框控件示例
<form>
<select name = "dropdown">
<option value = "banana" selected>香蕉</option>
<option value = "apple">苹果</option>
<option value = "orange">橘子</option>
</select>
</form>
选择框控件属性
<select>标签的属性：
| 属性 | 说明 |
|---|---|
| name | 用于给发送到服务器以识别并获取值的控件的名称。 |
| size | 这可用于显示滚动列表框。 |
| multiple | 如果设置为“multiple”，则允许用户从菜单中选择多个项目。 |
<option>标签的属性
| 属性 | 说明 |
|---|---|
| value | 当选项被选中时使用的值。 |
| selected | 指定此选项应为页面加载时最初选择的值。 |
| label | 标记选项的另一种方法 |
文件上传框
如果要允许用户将文件上载到网站，则需要使用文件上载框，也称为文件选择框。
这也是使用<input>元素创建的，但是type属性设置为file。
文件上传控件示例
<form> <input type = "file" name = "fileupload" accept = "image/*" /> </form>
文件上传控件属性
文件上传框的重要属性：
| 属性 | 说明 |
|---|---|
| name | 用于给发送到服务器以识别并获取值的控件的名称。 |
| accept | 指定服务器接受的文件类型。 |
按钮控件
在HTML中有多种创建可单击按钮的方法。
也可以通过将<input>标记的type属性设置为button来创建可单击按钮。
type属性可以选择以下值：
| 属性 | 说明 |
|---|---|
| submit | 创建一个自动提交表单的按钮。 |
| reset | 创建一个按钮，自动将窗体控件重置为其初始值。 |
| button | 创建一个按钮，用于在用户单击该按钮时触发客户端脚本。 |
| image | 创建一个可单击的按钮，但我们可以使用图像作为按钮的背景。 |
按钮控件示例
下面是一个具有三种类型按钮的表单的HTML代码示例–
<form> <input type = "submit" name = "submit" value = "提交" /> <input type = "reset" name = "reset" value = "重置" /> <input type = "button" name = "ok" value = "确定" /> <input type = "image" name = "imagebutton" src = "./src/button.png" /> </form>
隐藏表单控件
隐藏表单控件用于隐藏页面内的数据，稍后可以将这些数据推送到服务器。
此控件隐藏在代码内，不显示在实际页上。
隐藏表单控件示例
下面是示例HTML代码，用于显示隐藏控件-
<form> <p>现在是第7页</p> <input type = "hidden" name = "pagename" value = "7" /> <input type = "submit" name = "submit" value = "提交" /> <input type = "reset" name = "reset" value = "重置" /> </form>
