HTML表单示例

HTML表单用于收集用户输入。用户输入最常被发送到服务器进行处理。

<form>元素

HTML<form>元素用于为用户输入创建HTML表单：

<form>
.
form elements
.
</form>

该<form>元件是用于不同类型的输入元件，诸如容器：文本字段，复选框，单选按钮，提交按钮等。

<input>元素

HTML<input>元素是最常用的表单元素。

一个<input>元素可以根据显示在许多方面，type 属性。

这里有些例子：

类型	描述
<input type="text">	显示单行文本输入字段
<input type="radio">	显示一个单选按钮（用于选择多个选项之一）
<input type="checkbox">	显示一个复选框（用于选择多个选项中的零个或多个）
<输入类型="提交">	显示提交按钮（用于提交表单
<输入类型="按钮">	显示一个可点击的按钮

文本字段

所述文本输入限定了单行输入字段。

例子

带有文本输入字段的表单：

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

注意：表单本身不可见。另请注意，输入字段的默认宽度为20个字符。

<label>元素

请注意<label>上面示例中元素的使用。

该<label>标签为许多表单元素定义了一个标签。

该<label>元素对屏幕阅读器用户很有用，因为当用户关注输入元素时，屏幕阅读器会大声读出标签。

该<label>元素还可以帮助难以点击非常小的区域(例如单选按钮或复选框)的用户 - 因为当用户单击<label>元素内的文本时，它会切换单选按钮/复选框。

标签的for属性<label>应该等于元素的id属性，<input>将它们绑定在一起。

单选按钮

在<input type="radio">定义了一个单选按钮。

单选按钮让用户可以从有限数量的选项中选择一个。

例子

带有单选按钮的表单：

<p>Choose your favorite Web language:</p>
<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

复选框

该<input type="checkbox">限定了复选框。

复选框让用户可以从有限数量的选项中选择零个或更多选项。

例子

带有复选框的表单：

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

提交按钮

<input type="submit">表单数据提交给形状处理程序定义了一个按钮。

表单处理程序通常是服务器上的一个文件，带有用于处理输入数据的脚本。

表单处理程序在表单的action 属性中指定。

例子

带有提交按钮的表单：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<input>的名称属性

请注意，每个输入字段都必须有一个name要提交的属性。

如果name省略该属性，则根本不会发送输入字段的值。

例子

此示例不会提交“名字”输入字段的值：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

以上就是极悦小编介绍的"HTML表单示例"，希望对大家有帮助，想了解更多可查看HTML教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。