超文本标记语言/表单

HTML 表单是收集最终用户数据的简便方法。处理它们需要使用服务器端脚本语言或（在某些情况下，当需要在单个页面内提供有限的交互时）使用客户端脚本语言，例如 JavaScript。

这是一个简单的表单

<form id="" action="" method="post">
 <fieldset>
  <legend>Personal details</legend>

  <label for="first">First name</label>
  <input type="text" name="first" id="first"><br />

  <label for="family">Family name</label>
  <input type="text" name="family" id="family"><br />

  <input type="submit" name="personal">

 </fieldset>
</form>

以下是解释 -

id: 表单或控件的名称。
action: 可以处理数据的服务器端脚本的 URL。
method: 用于发送信息的方法。支持两种方法：POST 和 GET。POST 是首选方法，除了通常使用 GET 的简单搜索之外。与服务器端语言一起使用。
fieldset: 表单控件通常包含在 fieldset 元素中。复杂的表单可能有多个 fieldset。Fieldset 可以包含其他 fieldset。
legend: 每个 fieldset 从一个 legend 元素开始。元素的内容用作放置在 fieldset 边框中的标题。
label for="": 一个 label for 是单个表单控件。的 valuefor属性必须与id同一表单中表单控件的属性匹配。
input type="" name ="" id="": 各种类型的输入控件。支持的类型包括：submit、text、password、checkbox、radio、reset、file、hidden、image 和 button。的name属性由服务器用来识别表单中给定框中输入了哪些数据。的id属性用于将输入与标签匹配。的name和id属性对于文本输入通常具有相同的值，但对于复选框和单选按钮输入则具有不同的值。
select: 还存在用于下拉列表的 SELECT 元素和用于多行文本输入的 TEXTAREA 元素。

这个简单的示例使用 <br /> 标签在不同的控件之间强制换行。实际的表单将使用更结构化的标记来整齐地布局控件。

使用 CSS 进行格式化

HTML

此表单的 HTML 非常简单，您不必创建数百个 div 并将它们全部左对齐和右对齐；这会导致很多沮丧和很多调试，因为各种浏览器仍然以不同的方式解释 CSS 代码。

<form>

	<label for="name">Name</label>
	<input id="name" name="name"><br />

	<label for="address">Address</label>
	<input id="address" name="address">

</form>

CSS

此代码的 CSS 更有趣一些

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

br {
	clear: left;
}

让我们解释一下代码

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

标签的 CSS 包含四个部分

float: float 命令用于确定标签是否浮动到表单的左侧。
width: 这定义了标签的大小，保持所有标签的宽度固定，使所有内容保持在整齐的顺序行中。
display: 元素将显示为块级元素，在元素之前和之后有一个换行符。
margin-bottom: 通过在标签底部添加边距，可以确保标签以整齐的方式一个接一个地排列，并且标签之间有适当的填充。

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

width: 这再次是为了定义固定的宽度，使所有内容保持一致的整齐外观。
Text-align: 将文本右对齐，使所有内容远离左对齐的标签，再次使所有内容保持一致。
Padding-right: 这表示在右侧有一个适当的填充，再次使所有内容保持精致的调整。

br {
	clear: left;
}

clear: 这是最重要的部分，如果没有 clear:left，则没有任何内容能够正确对齐，这实际上会使每个元素序列中的所有内容彼此对齐，并向左对齐。

有关更多详细信息，请参阅本书的超文本标记语言/标签列表/表单部分。

外部链接

HTML 文档中的表单，w3.org
HTML 表单，w3schools.com
HTML 表单 - 学习 Web 开发，developer.mozilla.org
表单 (HTML)，en.wikipedia.org