html 教程

Appearance

HTML 表单和输入 ​

HTML 表单用于收集不同类型的用户输入。

在线实例 ​


本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本:

html
<!DOCTYPE html>
<html>
	<body>

		<form action="">
			Name : <input type="text" name="name"><br>
			Age : <input type="text" name="age">
		</form>

		<p><b>注意：</b>  表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

	</body>
</html>

本例演示如何创建 HTML 的密码域:

html
<!DOCTYPE html>
<html>
	<body>
		<form action="get">
		Username: <input type="text" name="user"><br>
		Password: <input type="password" name="password">
		</form>
		<p><b>注意： </b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
	</body>
</html>

HTML 表单 ​

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单使用表单标签 <form> 来设置:

html
<form>

	input elements

</form>

HTML 表单 - 输入元素 ​

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields） ​

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。您可以在中创建文本输入框！

实例 ​

html
<form>
	姓名: <input type="text" name="firstname"><br>
	电话号码: <input type="text" name="lastname">
</form>

浏览器显示如下：

姓名:

电话号码:

**注意:**表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。

密码字段 ​

密码字段通过标签 <input type="password"> 来定义:

实例 ​

html
<form>

密码: <input type="password" name="pwd">

</form>

浏览器显示效果如下:

密码:****

**注意:**密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons） ​

<input type="radio"> 标签定义了表单单选框选项。在中练习使用单选按钮！

实例 ​

html
<form>
	<input type="radio" name="sex" value="male">男<br>
	<input type="radio" name="sex" value="female">女
</form>

复选框（Checkboxes） ​

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。在中学习使用复选框！

实例 ​

html
<form>
	<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>
	<input type="checkbox" name="vehicle" value="Car">我有小车
</form>

提交按钮 (Submit Button) ​

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

实例 ​

html
<form name="input" action="html_form_action.action" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>


假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.action" 的页面。该页面将显示出输入的结果。

HTML 表单标签 ​

New : HTML5 新标签

标签描述
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签，一般为输入标题
<fieldset>定义了一组相关的表单元素，并使用外框包含起来
<legend>定义了 <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist>指定一个预先定义的输入控件选项列表
<keygen>定义了表单的密钥对生成器字段
<output>定义一个计算结果