HTML表单详解 - 珊瑚贝

本文概述

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

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

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

为什么使用HTML表单

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

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

HTML表单语法

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

句法：

<form>
//Form elements
</form>

HTML <input>元素

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

例

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

输出：

HTML TextField控件

输入标记的type =“ text”属性创建文本字段控件, 也称为单行文本字段控件。 name属性是可选的, 但对于服务器端组件（例如JSP, ASP, PHP等）是必需的。

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

输出：

注意：如果你将省略“名称”属性, 则文本字段输入将不会提交到服务器。

表单中的HTML <textarea>标记

HTML中的<textarea>标记用于在表单中插入多行文本。 <textarea>的大小可以使用“行”或“ 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>

输出：

表单中的标签标签

最好在表格中加上标签。因为它使代码解析器/浏览器/用户友好。

如果单击标签, 它将集中在文本控件上。为此, 你需要在标签标签中具有for属性, 该属性必须与输入标签的id属性相同。

注意：最好将<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密码字段控制

用户在密码字段控件中看不到密码。

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

输出：

HTML 5电子邮件字段控件

HTML 5中new的email字段。它验证文本是否正确。你必须使用@和。在这个领域里。

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

类型= 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>元素一起使用, 该元素为分组的元素提供标题。

例：

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

立即测试

输出：

HTML表单示例

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

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

立即测试