HTML 表单输入(Forms and Input)
HTML表单被用于选择不同类型的用户输入.
亲自试一试 - 例子
创建文本域
示例演示了如何创建文本域.用户可以在文本域中写入文本信息.
创建密码域
示例演示了如何创建密码域.
HTML表单
HTML表单时用力将数据传递到服务器.
HTML表单可以包含输入元素,如文本域、多选框、单选框、提交按钮等等.表单也可以包含选择下拉框、多行输入域、表单分组、标记元素等.
<form> 标签用于创建HTML表单:
.
input elements
.
</form>
HTML表单 - 输入元素
大部分重要的元素来自于<input> 元素.
<input>元素用于选择用户信息.
<input> 元素有很多种类型, 依靠type属性进行区分. <input> 元素可以是文本域、多选框、密码域、单选按钮、提交按钮等等.
大部分通用的输入类型描述如下.
文本域
<input type="text"> 定义了一个单行的输入域,用户可以输入文本信息:
姓: <input type="text" name="firstname"><br>
名: <input type="text" name="lastname">
</form>
上面的代码在浏览器中显示如下:
注意: 表单本身是不显示的。文本域的默认宽度是20个字符.
密码域
<input type="password"> 定义了一个密码域:
密码: <input type="password" name="pwd">
</form>
上面的代码在浏览器中显示如下:
注意: 密码域中输入的字符是被遮盖的(显示为星号或黑色小圆圈).
单选按钮(也可称为单选框)
<input type="radio"> 定义了一个单选按钮. 单选按钮在多个选择中只可选择一项:
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
上面代码在浏览器中显示如下:
多选框
<input type="checkbox"> 定义了一个多选框.多选框可以让用户在有限的选择框中,选择0个或多个选项.
<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>
<input type="checkbox" name="vehicle" value="Car">我有轿车
</form>
上面的代码在浏览器中显现如下:
提交按钮
<input type="submit"> 定义了一个提交按钮.
提交按钮用于将数据发送到数据库. 数据会发送到form表单的action属性指定的页面.一般被定义的文件都是有接受用户输入的功能:
用户名: <input type="text" name="user">
<input type="submit" value="提交表单">
</form>
上面的代码在浏览器中显现如下:
如果你在上面的文本域中输入一些字符,然后点击“提交表单”按钮,
浏览器会发送表单的数据到/html/html_form_action页面.页面将显示你接收的结果.
更多例子
单选按钮
示例演示了如何创建单选按钮.
多选框
示例演示了如何创建多选框。用户可以选择或不选择多选框.
简单的下拉列表
示例演示了如何创建一个简单下拉列表.
下拉列表默认选择某一项
示例演示了如何创建一个下拉列表,其中带有一个预选值.
多行文本域
示例演示了如何创建一个多行文本域控件. 在多行文本域中用户可以输入无限的字符.
创建按钮
示例演示了如何创建一个按钮.
表单例子
自定义表单数据
示例演示了如何创建一个带有边框的表单.
带有文本域和提交按钮的表单
示例演示了如何创建带有两个文本域和一个提交按钮的表单.
多选框表单
示例演示了如何创建带有两个多选框和一个提交按钮的表单.
单选按钮表单
示例演示了如何创建带有两个单选按钮和提交按钮的表单button.
发送邮件的表单
示例演示了如何创建一个发送邮件的表单.