首页教程软件教程正文

HTML表单

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 154 浏览 4867 个字

摘要 :

文章目录为什么使用HTML表单 HTML表单语法 HTML表单标签 HTML 5表单标签 HTML <form>元素 HTML <input>元素 HTML文本字段控件 HTML表单中的<textarea&g……

文
章
目
录

为什么使用HTML表单
HTML表单语法
HTML表单标签
HTML 5表单标签
HTML <form>元素
HTML <input>元素
HTML文本字段控件
HTML表单中的<textarea>标签
表单中<label>标签
HTML密码password 字段控件
单选按钮控件
复选框控件
提交按钮控件
HTML中的<fieldset>元素
HTML表单示例
支持的浏览器

HTML表单是文档的一部分，包含诸如文本字段、密码字段、复选框、单选按钮、提交按钮、菜单等控件。

HTML表单允许用户输入数据，这些数据将被发送到服务器进行处理，例如姓名、电子邮件地址、密码、电话号码等。

为什么使用HTML表单

如果您想从网站访问者那里收集一些数据，就需要HTML表单。

例如：如果用户想在互联网上购买一些物品，他/她必须填写表单，如送货地址和信用卡/借记卡详细信息，以便物品可以送到指定地址。

HTML表单语法

<form action=\"server url\" method=\"get|post\">  
  //输入控件，例如文本字段、文本区域、单选按钮和按钮。
</form>

HTML表单标签

让我们看一下HTML表单标签的列表。

标签	描述
<form>	定义一个HTML表单，用于输入用户信息。
<input>	定义一个输入控件。
<textarea>	定义一个多行输入控件。
<label>	为输入元素定义标签。
<fieldset>	将相关元素分组在一个表单内。
<legend>	为 <fieldset> 元素定义标题。
<select>	定义一个下拉列表。
<optgroup>	定义下拉列表中相关选项的分组。
<option>	定义下拉列表中的选项。
<button>	定义一个可点击的按钮。

HTML 5表单标签

让我们看一下HTML 5表单标签的列表。

标签	描述
<datalist>	指定输入控件的预定义选项列表。
<keygen>	为表单定义密钥对生成器字段。
<output>	定义计算结果。

HTML <form>元素

HTML <form>元素提供了一个文档部分，用于从用户那里接收输入。它提供了各种交互控件，用于向Web服务器提交信息，如文本字段、文本区域、密码字段等。

注意：<form>元素本身不会创建表单，但它是包含所有所需表单元素的容器，如<input>、<label>等。

语法：

<form>  
//Form elements  
</form>

HTML <input>元素

HTML <input>元素是基本的表单元素。它用于创建表单字段，以接收用户输入。我们可以应用不同的输入字段来收集用户的不同信息。以下是显示简单文本输入的示例。

<body>  
  <form>  
     Enter your name  <br>  
    <input type=\"text\" name=\"username\">  
  </form>  
</body>

HTML文本字段控件

<input>标签的type=”text”属性创建文本字段控件，也称为单行文本字段控件。name属性是可选的，但对于服务器端组件（如JSP、ASP、PHP等），它是必需的。

<form>  
    First Name: <input type=\"text\" name=\"firstname\"/> <br/>  
    Last Name:  <input type=\"text\" name=\"lastname\"/> <br/>  
 </form>

注意：如果省略’name’属性，文本字段输入将不会被提交到服务器。

HTML表单中的<textarea>标签

HTML中的<textarea>标签用于在表单中插入多行文本。<textarea>的大小可以通过”rows”或”cols”属性或通过CSS进行指定。

示例：

<!DOCTYPE html>  
<html>  
<head>  
    <title>Form in HTML</title>  
</head>  
<body>  
  <form>  
        Enter your address:<br>  
      <textarea rows=\"2\" cols=\"20\"></textarea>  
  </form>  
</body>  
</html>

表单中<label>标签

在表单中使用<label>标签被认为是更好的做法，因为它使代码对解析器、浏览器和用户更友好。

如果单击<label>标签，它将聚焦在文本控件上。要实现这一点，您需要在<label>标签中使用一个与<input>标签的id属性相同的for属性。

注意：在表单中使用<label>标签是个好习惯，尽管它是可选的，但如果使用它，那么在轻触或单击<label>标签时将提供焦点。在触摸屏上特别有价值。

<form>  
    <label for=\"firstname\">First Name: </label> <br/>  
              <input type=\"text\" id=\"firstname\" name=\"firstname\"/> <br/>  
   <label for=\"lastname\">Last Name: </label>  
              <input type=\"text\" id=\"lastname\" name=\"lastname\"/> <br/>  
 </form>

HTML密码password 字段控件

在password 密码字段控件中，用户无法看到密码，因为密码是隐藏的。

<form>  
    <label for=\"password\">Password: </label>  
              <input type=\"password\" id=\"password\" name=\"password\"/> <br/>  
</form>

HTML 5电子邮件字段控件

HTML 5中新增的电子邮件字段控件会验证文本是否为正确的电子邮件地址。在此字段中，必须使用@和.。

<form>  
    <label for=\"email\">Email: </label>  
              <input type=\"email\" id=\"email\" name=\"email\"/> <br/>  
</form>

注意：如果未输入正确的电子邮件地址，将显示错误消息，类似于：

单选按钮控件

单选按钮用于从多个选项中选择一个选项。它通常用于选择性别、测验问题等。

如果您为所有单选按钮使用相同的名称，那么一次只能选择一个单选按钮。

使用单选按钮来表示多个选项时，每次只能选择一个选项。

<form>  
    <label for=\"gender\">Gender: </label>  
              <input type=\"radio\" id=\"gender\" name=\"gender\" value=\"male\"/>Male  
              <input type=\"radio\" id=\"gender\" name=\"gender\" value=\"female\"/>Female <br/>  
</form>

复选框控件

复选框控件用于从提供的复选框中选择多个选项。

<form>  
Hobby:<br>  
              <input type=\"checkbox\" id=\"cricket\" name=\"cricket\" value=\"cricket\"/>  
                 <label for=\"cricket\">Cricket</label> <br>  
              <input type=\"checkbox\" id=\"football\" name=\"football\" value=\"football\"/>  
                 <label for=\"football\">Football</label> <br>  
              <input type=\"checkbox\" id=\"hockey\" name=\"hockey\" value=\"hockey\"/>  
                 <label for=\"hockey\">Hockey</label>  
</form>

注意：复选框与单选按钮类似，不同之处在于复选框可以同时选择多个选项，而单选按钮一次只能选择一个选项。

提交按钮控件

HTML中的<input type=”submit>用于在网页上添加一个提交按钮。当用户单击提交按钮时，表单将提交到服务器。

语法：

<input type=\"submit\" value=\"submit\">

type=”submit”指定它是一个提交按钮
value属性可以是网页上按钮上写的任何内容
name属性在这里可以省略。

示例：

<form>  
    <label for=\"name\">Enter name</label><br>  
    <input type=\"text\" id=\"name\" name=\"name\"><br>  
    <label for=\"pass\">Enter Password</label><br>  
    <input type=\"Password\" id=\"pass\" name=\"pass\"><br>  
    <input type=\"submit\" value=\"submit\">  
</form>

HTML中的<fieldset>元素

HTML中的<fieldset>元素用于对表单的相关信息进行分组。这个元素通常与<legend>元素一起使用，<legend>元素为分组的元素提供标题。

示例：

<form>  
     <fieldset>  
      <legend>User Information:</legend>  
    <label for=\"name\">Enter name</label><br>  
<input type=\"text\" id=\"name\" name=\"name\"><br>  
<label for=\"pass\">Enter Password</label><br>  
<input type=\"Password\" id=\"pass\" name=\"pass\"><br>  
<input type=\"submit\" value=\"submit\">  
</fieldset>  
</form>

HTML表单示例

以下是一个简单的注册表单示例：

<!DOCTYPE html>  
 <html>  
 <head>  
  <title>Form in HTML</title>  
</head>  
 <body>  
     <h2>Registration form</h2>  
    <form>  
     <fieldset>  
        <legend>User personal information</legend>  
        <label>Enter your full name</label><br>  
        <input type=\"text\" name=\"name\"><br>  
         <label>Enter your email</label><br>  
         <input type=\"email\" name=\"email\"><br>  
         <label>Enter your password</label><br>  
         <input type=\"password\" name=\"pass\"><br>  
         <label>confirm your password</label><br>  
         <input type=\"password\" name=\"pass\"><br>  
         <br><label>Enter your gender</label><br>  
         <input type=\"radio\" id=\"gender\" name=\"gender\" value=\"male\"/>Male  <br>  
         <input type=\"radio\" id=\"gender\" name=\"gender\" value=\"female\"/>Female <br/>    
         <input type=\"radio\" id=\"gender\" name=\"gender\" value=\"others\"/>others <br/>   
          <br>Enter your Address:<br>  
         <textarea></textarea><br>  
         <input type=\"submit\" value=\"sign-up\">  
     </fieldset>  
  </form>  
 </body>  
</html>