HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML 表单输入(Forms and Input)


HTML表单被用于选择不同类型的用户输入.


Examples

亲自试一试 - 例子

创建文本域
示例演示了如何创建文本域.用户可以在文本域中写入文本信息.

创建密码域
示例演示了如何创建密码域.


HTML表单

HTML表单时用力将数据传递到服务器.

HTML表单可以包含输入元素,如文本域、多选框、单选框、提交按钮等等.表单也可以包含选择下拉框、多行输入域、表单分组、标记元素等.

<form> 标签用于创建HTML表单:

<form>
.
input elements
.
</form>


HTML表单 - 输入元素

大部分重要的元素来自于<input> 元素.

<input>元素用于选择用户信息.

<input> 元素有很多种类型, 依靠type属性进行区分. <input> 元素可以是文本域、多选框、密码域、单选按钮、提交按钮等等.

大部分通用的输入类型描述如下.


文本域

<input type="text"> 定义了一个单行的输入域,用户可以输入文本信息:

<form>
姓: <input type="text" name="firstname"><br>
名: <input type="text" name="lastname">
</form>

上面的代码在浏览器中显示如下:

姓:
名:

注意: 表单本身是不显示的。文本域的默认宽度是20个字符.


密码域

<input type="password"> 定义了一个密码域:

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

上面的代码在浏览器中显示如下:

密码:

注意: 密码域中输入的字符是被遮盖的(显示为星号或黑色小圆圈).


单选按钮(也可称为单选框)

<input type="radio"> 定义了一个单选按钮. 单选按钮在多个选择中只可选择一项:

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

上面代码在浏览器中显示如下:



多选框

<input type="checkbox"> 定义了一个多选框.多选框可以让用户在有限的选择框中,选择0个或多个选项.

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

上面的代码在浏览器中显现如下:

我有自行车
我有轿车

提交按钮

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

提交按钮用于将数据发送到数据库. 数据会发送到form表单的action属性指定的页面.一般被定义的文件都是有接受用户输入的功能:

<form name="input" action="/html/html_form_action" method="get">
用户名: <input type="text" name="user">
<input type="submit" value="提交表单">
</form>

上面的代码在浏览器中显现如下:

用户名:

如果你在上面的文本域中输入一些字符,然后点击“提交表单”按钮,
浏览器会发送表单的数据到/html/html_form_action页面.页面将显示你接收的结果.


Examples

更多例子

单选按钮
示例演示了如何创建单选按钮.

多选框
示例演示了如何创建多选框。用户可以选择或不选择多选框.

简单的下拉列表
示例演示了如何创建一个简单下拉列表.

下拉列表默认选择某一项
示例演示了如何创建一个下拉列表,其中带有一个预选值.

多行文本域
示例演示了如何创建一个多行文本域控件. 在多行文本域中用户可以输入无限的字符.

创建按钮
示例演示了如何创建一个按钮.

Examples

表单例子

自定义表单数据
示例演示了如何创建一个带有边框的表单.

带有文本域和提交按钮的表单
示例演示了如何创建带有两个文本域和一个提交按钮的表单.

多选框表单
示例演示了如何创建带有两个多选框和一个提交按钮的表单.

单选按钮表单
示例演示了如何创建带有两个单选按钮和提交按钮的表单button.

发送邮件的表单
示例演示了如何创建一个发送邮件的表单.





To Top