HTML表单

一、HTML表单

表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单元素通常需要配合<form>元素来使用，<form>元素定义了一个表单，可以包含一个或多个表单元素，并用于提交表单数据到服务器或其他目的。以下是HTML表单的基本代码：

<form>
. 
input elements 
.
</form>

输入标签<input>是在HTML表单中最常用的标签之一，它用于让用户输入不同类型的数据。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

二、文本域

文本域（Text Fields）通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

实例代码：

<form>
姓名: <input type="text" name="firstname"><br> 
电话号码: <input type="text" name="lastname"> 
</form>

浏览器显示如下：

注意：在大多数浏览器中，文本域的缺省宽度是 20 个字符。

三、密码字段

密码字段通过标签 <input type="password"> 来定义。

实例代码：

<form> 
密码: <input type="password" name="pwd"> 
</form>

浏览器显示效果如下:

以下是另一个示例：

<label for="password">密码：</label>
<input type="password" id="password" name="password">

在上述示例中，我们使用<input>标签和type="password"属性来创建密码字段。我们还使用<label>元素来标识密码字段，并使用for属性将其与相应的<input>元素关联起来。

注意：密码字段字符不会明文显示，而是以星号或圆点替代。

四、单选按钮

<input type="radio">标签用于创建单选按钮（Radio Buttons），它允许用户从多个选项中选择一个。每个单选按钮都必须有一个唯一的值，以便在提交表单时将所选选项与相应的字段关联起来。

实例代码：

<form> 
<input type="radio" name="sex" value="male">男<br> 
<input type="radio" name="sex" value="female">女 
</form>

浏览器显示效果如下:

五、复选框

<input type="checkbox">标签用于创建复选框（Checkboxes），它允许用户从多个选项中选择一个或多个。每个复选框都必须有一个唯一的值，以便在提交表单时将所选选项与相应的字段关联起来。

实例代码：

<form> 
<input type="checkbox" name="vehicle" value="Bike">我有自行车<br> 
<input type="checkbox" name="vehicle" value="Car">我有小车
</form>

浏览器显示效果如下:

六、提交按钮

<input type="submit">标签用于创建提交按钮（Submit Button），它允许用户提交表单数据到服务器进行处理或执行相关操作。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

实例代码：

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示截图效果如下:

八、HTML表单标签