HTML 标签列表

HTML 表单

一个HTML表格是一个文档的一部分,其包含例如文本域,密码域,复选框,单选按钮控制,提交按钮,菜单等。

HTML 表单便于用户输入要发送到服务器进行处理的数据,例如姓名、电子邮件地址、密码、电话号码等。


为什么使用 HTML 表单

如果您想从站点访问者那里收集一些数据,则需要 HTML 表单。

例如:如果用户想在互联网上购买一些物品,他/她必须填写诸如送货地址和信用卡/借记卡详细信息等表格,以便将物品发送到给定的地址。


HTML 表单语法

句法 (Syntax)

<form action="server url" method="get|post">  
  //input controls e.g. textfield, textarea, radiobutton, button  
</form>

HTML 表单标签

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

标签描述
<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> 等。

句法 (Syntax)

<form>  
//Form elements  
</form>

HTML <input> 元素

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

例子 (Example)

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

输出:

HTML 表单


HTML 文本字段控件

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

例子 (Example)

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

输出:

HTML 文本字段控件

注意:如果您将省略 'name' 属性,则文本字段输入将不会提交到服务器。


表单中的 HTML <textarea> 标签

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

例子 (Example)

<!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>


输出:

表单中的 HTML textarea 标签


表格中的标签标签

最好在形式上有标签。因为它使代码解析器/浏览器/用户友好。

如果单击 label 标签,它将聚焦在文本控件上。为此,标签标签中的 for 属性必须与输入标签的 id 属性相同。

注意:最好将 <label> 标签与表单一起使用,虽然它是可选的,但如果您将使用它,那么当您点击或单击标签标签时,它将提供一个焦点。触摸屏更值得。

例子 (Example)

<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 标签标签


HTML 密码字段控件

密码对密码字段控件中的用户不可见。

例子 (Example)

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

输出:

HTML 密码字段控件


HTML 5 电子邮件字段控制

HTML 5 中新的电子邮件字段。它验证文本以获取正确的电子邮件地址。您必须使用 @ 和 。在这个领域里。

例子 (Example)

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


它将在浏览器中显示如下:

HTML 5 电子邮件字段控制

注意:如果我们不输入正确的电子邮件,它将显示如下错误:

HTML 5 电子邮件字段控制


单选按钮控制

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

如果对所有单选按钮使用同一个名称,则一次只能选择一个单选按钮。

使用多个选项的单选按钮,您一次只能选择一个选项。

例子 (Example)

<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>

单选按钮控制


复选框控件

复选框控件用于检查给定复选框中的多个选项。

例子 (Example)

<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">用于在网页上添加提交按钮。当用户单击提交按钮时,表单将提交到服务器。

句法 (Syntax)

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

type = submit ,指定它是一个提交按钮

value 属性可以是我们在网页按钮上写的任何东西。

此处可以省略 name 属性。

例子 (Example)

<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> 元素一起使用。

例子 (Example)

<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 字段集元素


HTML 表单示例

下面是一个简单的注册形式的例子。

例子 (Example)

<!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>

输出:

HTML 表单示例


HTML 表单示例

让我们看一个创建 HTML 表单的简单示例。

例子 (Example)

<form action="#">  
<table>  
<tr>  
    <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>  
    <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>  
    <td><input type="password" name="password" id="register_password" style="width:160px"/></td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>  
    <td  
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>  
    <td>  
<input type="radio" name="gender" id="register_gendermale" value="male"/>  
<label for="register_gendermale">male</label>  
<input type="radio" name="gender" id="register_genderfemale" value="female"/>  
<label for="register_genderfemale">female</label>  
    </td>  
</tr>  
<tr>  
    <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>  
    <td><select name="country" id="register_country" style="width:160px">  
    <option value="india">india</option>  
    <option value="pakistan">pakistan</option>  
    <option value="africa">africa</option>  
    <option value="china">china</option>  
    <option value="other">other</option>  
</select>  
</td>  
</tr>  
<tr>  
    <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>  
</div></td>  
</tr>  
</table>  
</form>


支持浏览器

元素ChromeIEFirefoxSafariOpera
<form>YesYesYesYesYes



上一主题 HTML 描述列表 下一主题 HTML 表单输入类型
  • 使用社交账号登录,本站支持
全部评论(0)