单选按钮控件

单选按钮用于在许多选项中只需选择一个选项。它们也使用HTML<input>标记创建，但type属性设置为radio。

单选按钮控件示例

<form>
   <input type = "radio" name = "subject" value = "man"> 男
   <input type = "radio" name = "subject" value = "woman"> 女
</form>

单选按钮控件属性

以下是单选按钮的属性列表。

选择框控件

选择框也称为下拉框，以下拉列表形式列出各种选项，用户可以从中选择一个或多个选项。

选择框控件示例

<form>
   <select name = "dropdown">
      <option value = "banana" selected>香蕉</option>
      <option value = "apple">苹果</option>
      <option value = "orange">橘子</option>
   </select>
</form>

选择框控件属性

<select>标签的属性：

<option>标签的属性

隐藏表单控件

隐藏表单控件用于隐藏页面内的数据，稍后可以将这些数据推送到服务器。
此控件隐藏在代码内，不显示在实际页上。

隐藏表单控件示例

下面是示例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>

文本输入控件

有三种类型的文本输入框：

1. 单行文本输入控件-此控件用于只需要一行用户输入的项目，例如搜索框或名称。它们是使用HTML<input>标记创建的。
2. 密码输入框控件-这也是一个单行文本输入，但它会在用户输入时屏蔽字符。它们也是使用HTMl<input>标记创建的。
3. 多行文本输入框-当需要多行输入时，用户可能需要使用多行文本。多行输入控件是使用HTML<textarea>标记创建的。

单行文本输入控件

此控件用于只需要一行用户输入的项，例如搜索框或名称。它们是使用HTML<input>标记创建的。

<form >
   用户名: <input type = "text" name = "username" />
   <br>
   邮箱: <input type = "text" name = "email" />
</form>

单行文本输入控件属性

下面是用于创建文本字段的<input>标记的属性列表。

密码输入框控件

这也是一个单行文本输入，但一旦用户输入字符，它就会屏蔽字符。它们也使用HTML<input>标记创建，但type属性设置为password。

密码输入框控件示例

这里是一个用于获取用户密码的单线密码输入的基本示例–

<form >
   用户名: <input type = "text" name = "username" />
   <br>
   密码: <input type = "password" name = "password" />
</form>

密码输入框控件属性

以下属性列表用于创建<password>。

多行文本输入控件

当要求用户提供可能超过一个句子的信息时，使用此选项。
多行输入控件是使用HTML<textarea>标记创建的。

多行文本输入控件示例

<form>
   描述 : <br />
   <textarea rows = "5" cols = "50" name = "description">
      请在这里输入意见和建议。
   </textarea>
</form>

多行文本输入控件属性

下面是<textarea>标记的属性列表。

HTML表单控件

有不同类型的表单控件可用于使用HTML表单收集数据：

1. 文本输入控件

2. 复选框控件

3. 单选控件

4. 选择框控件

5. 文件选择框

6. 隐藏控件

7. 可点击按钮

8. 提交和重置按钮

按钮控件

在HTML中有多种创建可单击按钮的方法。
也可以通过将<input>标记的type属性设置为button来创建可单击按钮。

type属性可以选择以下值：

按钮控件示例

下面是一个具有三种类型按钮的表单的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>

表单用于从站点访问者收集一些数据时。
表单将接受来自站点访问者的输入，然后将其发布到后端应用程序，如CGI、ASP脚本或PHP脚本等。
后端应用程序将根据应用程序内部定义的业务逻辑对传递的数据执行所需的处理。

有各种各样的表单元素可用，如文本字段、文本区域字段、下拉菜单、单选按钮、复选框等。

HTML<form>标记用于创建HTML表单

<form action = "Script URL" method = "GET|POST">
   表单元素 比如： input, textarea 等等。
</form>

文件上传框

如果要允许用户将文件上载到网站，则需要使用文件上载框，也称为文件选择框。
这也是使用<input>元素创建的，但是type属性设置为file。

文件上传控件示例

<form>
   <input type = "file" name = "fileupload" accept = "image/*" />
</form>

文件上传控件属性

文件上传框的重要属性：

复选框控件

当需要选择多个选项时，使用复选框。它们也是使用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>标记的属性列表。

表单属性

最常用的表单属性：