您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

HTML 表单和输入

胜于蓝2013-12-31【CSS3|Html5】人已围观

简介HTML 表单用于收集不同类型的用户输入。在线实例创建文本字段 (Text field)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。创建密码字段
本例演示如何

HTML 表单用于收集不同类型的用户输入。BdC胜于蓝|优秀个人博客


Examples

在线实例

创建文本字段 (Text field)BdC胜于蓝|优秀个人博客
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。BdC胜于蓝|优秀个人博客

创建密码字段BdC胜于蓝|优秀个人博客
本例演示如何创建 HTML 的密码域。BdC胜于蓝|优秀个人博客

(在本页底端可以找到更多实例。)BdC胜于蓝|优秀个人博客


HTML 表单

表单是一个包含表单元素的区域。BdC胜于蓝|优秀个人博客

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。BdC胜于蓝|优秀个人博客

表单使用表单标签 <form> 来设置:BdC胜于蓝|优秀个人博客

<form>BdC胜于蓝|优秀个人博客
.BdC胜于蓝|优秀个人博客
input 元素BdC胜于蓝|优秀个人博客
.BdC胜于蓝|优秀个人博客
</form>BdC胜于蓝|优秀个人博客
 

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签(<input>)。BdC胜于蓝|优秀个人博客

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:BdC胜于蓝|优秀个人博客


文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。BdC胜于蓝|优秀个人博客

<form>BdC胜于蓝|优秀个人博客
First name: <input type="text" name="firstname"><br>BdC胜于蓝|优秀个人博客
Last name: <input type="text" name="lastname">BdC胜于蓝|优秀个人博客
</form>

浏览器显示如下:BdC胜于蓝|优秀个人博客

First name: BdC胜于蓝|优秀个人博客
Last name:  

注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。BdC胜于蓝|优秀个人博客


密码字段

密码字段通过标签<input type="password"> 来定义:BdC胜于蓝|优秀个人博客

<form>BdC胜于蓝|优秀个人博客
Password: <input type="password" name="pwd">BdC胜于蓝|优秀个人博客
</form>

浏览器显示效果如下:BdC胜于蓝|优秀个人博客

Password:  

注意:密码字段字符不会明文显示,而是以星号或圆点替代。BdC胜于蓝|优秀个人博客


单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项BdC胜于蓝|优秀个人博客

<form>BdC胜于蓝|优秀个人博客
<input type="radio" name="sex" value="male">Male<br>BdC胜于蓝|优秀个人博客
<input type="radio" name="sex" value="female">FemaleBdC胜于蓝|优秀个人博客
</form>

浏览器显示效果如下:BdC胜于蓝|优秀个人博客

MaleBdC胜于蓝|优秀个人博客
Female

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。BdC胜于蓝|优秀个人博客

<form>BdC胜于蓝|优秀个人博客
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>BdC胜于蓝|优秀个人博客
<input type="checkbox" name="vehicle" value="Car">I have a car BdC胜于蓝|优秀个人博客
</form>

浏览器显示效果如下:BdC胜于蓝|优秀个人博客

I have a bikeBdC胜于蓝|优秀个人博客
I have a car

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.BdC胜于蓝|优秀个人博客

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

<form name="input" action="html_form_action.php" method="get">BdC胜于蓝|优秀个人博客
Username: <input type="text" name="user">BdC胜于蓝|优秀个人博客
<input type="submit" value="Submit">BdC胜于蓝|优秀个人博客
</form>

浏览器显示效果如下:BdC胜于蓝|优秀个人博客

Username:  

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。BdC胜于蓝|优秀个人博客


Try it 更多实例

单选按钮(Radio buttons)BdC胜于蓝|优秀个人博客
本例演示如何在 HTML 中创建单选按钮。BdC胜于蓝|优秀个人博客

复选框(Checkboxes)BdC胜于蓝|优秀个人博客
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。BdC胜于蓝|优秀个人博客

简单的下拉列表BdC胜于蓝|优秀个人博客
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。BdC胜于蓝|优秀个人博客

预选下拉列表BdC胜于蓝|优秀个人博客
本例演示如何创建一个简单的带有预选值的下拉列表。BdC胜于蓝|优秀个人博客

文本域(Textarea)BdC胜于蓝|优秀个人博客
本例演示如何创建文本域(多行文本输入控件)。用户可在文本域中写入文本。可写入字符的字数不受限制。BdC胜于蓝|优秀个人博客

创建按钮BdC胜于蓝|优秀个人博客
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。BdC胜于蓝|优秀个人博客

Try it 表单实例

带边框的表单BdC胜于蓝|优秀个人博客
本例演示如何在数据周围绘制一个带标题的框。BdC胜于蓝|优秀个人博客

带有输入框和确认按钮的表单BdC胜于蓝|优秀个人博客
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。BdC胜于蓝|优秀个人博客

带有复选框的表单BdC胜于蓝|优秀个人博客
此表单包含两个复选框和一个确认按钮。BdC胜于蓝|优秀个人博客

带有单选按钮的表单BdC胜于蓝|优秀个人博客
此表单包含两个单选框和一个确认按钮。BdC胜于蓝|优秀个人博客

从表单发送电子邮件BdC胜于蓝|优秀个人博客
此例演示如何从表单发送电子邮件。BdC胜于蓝|优秀个人博客


HTML 表单标签

New : HTML5新标签BdC胜于蓝|优秀个人博客

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

Tags:

很赞哦! ()

上一篇:HTML 属性

下一篇:HTML 颜色

文章评论

当前时间

快速排名

  • 网站建设|万词霸屏,企业软文推广,刷下拉框
  • 快速排名:不用再等SEO三个月,只需3-7天即可把行业关键词覆盖百度搜索引擎首页,点击不收费,排名报表,真实访问量报表一目了然。

合作加盟

  • 扫码请注明来意,否则不会通过
  • 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
  • 扫码成为快钱代理
  • 扫码加站长微信,为您推荐快钱总部负责人
  • 快钱POSS机(电签版)
  • 1,免押版:签约费率快捷交易0.38%,常规交易0.65%
  • 贷记卡单笔≥3000元视为激活
  • 2,,有押版:签约快捷交易0.38%,常规交易0.65%
  • 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
  • 电签版ipos参与每月扶持奖励
  • 电签版ipos与Mpos单独考核台均
  • 30台以上有效激活奖励3000元扶持金
  • 当月交易额≥3000元的为活跃用户

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计7613篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 扫描二维码:请注明来意,否则不会通过
  • 微信号:扫描二维码,关注我们
歌名 - 歌手
0:00