HTML表单

6人阅读 评论(0) 收藏 举报
分类:

表单元素本身是指<form>,不过它也有一个更广泛的概念,指构成表单的所有元素。

首先就<form>元素本身来说,主要有两个属性(暂时不用细究,到后面我们还有详细说明):

  • action:表示表单数据所提交到的处理地址(如果不知道处理地址,可先用#表示)
  • method:表示提交内容的方式,默认取值为 get,可以设置为 post

接下来将会简单介绍几种form表单常用元素。在介绍表单常用元素之前,先说下一般它们都通用的几个属性:

  • name:表示字段名称
  • value:表示字段值(最后提交的表单数据就是所有的字段值)
  • disabled:表示字段是否禁用,该属性可以不用设置值,加上该属性即表示禁用
  • readonly:表示字段是否只读,该属性可以不用设置值,加上该属性即表示只读

更多可参考:

下面正式介绍一些常用的表单元素,里面涉及到的所有的示例皆可在线预览

<input>元素

<input>元素跟<img>元素一样,不需要闭合标签。除了上面说到的通用属性外,其常见属性如下:

  • type:必备属性,常见取值如下:
    • text:文本输入框
    • password:密码输入框
    • search:搜索框
    • number:数字输入框
    • radio:单选按钮
    • checkbox:复选框
    • hidden:隐藏域(页面不可见,用来保存数据等)
    • file: 上传文件
    • button:普通按钮
    • submit:提交按钮
    • reset:重置按钮
  • placeholder:如为输入框时,可设置该属性,在输入框中灰色显示提示信息

更多 input 请参考:

<textarea>元素

用于多行文本输入,如上面的新浪微博截图中的发表微博就是个多行文本输入框,我们常用的评论输入框也是这个。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过等我们学了 CSS 之后,更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸。

简单示例如下:

<textarea rows="5" cols="30" placeholder="请输入评论"></textarea>

更多 textarea 请参考:

<select>元素

用于创建选项菜单,默认只能选择一个值,可通过设置属性multiple="multiple"来实现多选(很少很少使用多选)。

其选项为<option>元素,常用有两个属性:

  • value:表示选中该选项的值。

  • selected: 表示默认选中。

更多 select 请参考:

<button>元素

<button>元素用来定义按钮,跟 input 定义的按钮不同,这个是有闭合标签的。简单示例如下:

<button>我是个普通按钮</button>

同样也可以通过设置 type 属性来实现提交按钮和重置按钮,不过不建议这么做。

<!-- 下面的两种方式不建议使用 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

一般对于提交与重置按钮,我们建议使用 input 来定义,对于普通按钮可以使用 button。

更多 button 请参考:

<label>元素

<label>元素用于关联表单元素的标题,可直接包裹表单元素,也可以通过设置其 for 属性关联到表单元素的 id 属性,这样点击 label 标题上关联的表单元素就可以自动获取焦点,提升用户体验。

简单示例如下:

<!-- 包裹表单元素 -->
<label>用户名:<input type="text"></label>

<!-- 使用for属性关联表单元素的id属性 -->
<label for="username">用户名:</label><input type="text" id="username">

更多 label 请参考:

更多参考

更多关于表单元素知识请参考:HTML5中的表单元素

查看评论

html 表单 html 表单

  • 2011年06月30日 15:48
  • 559KB
  • 下载

html表单的例子

表单的例子                    用  户  名:         密      码:         性      别:男              女     ...
  • cherishSpring
  • cherishSpring
  • 2016-05-18 17:55:14
  • 1863

HTML高级标签之表单应用(一)

表单应用包括登录表单, 单选框, 复选框, 下拉列表, 普通列表, 多选列表, 多行文本域 本章主要学习的是登录表单,单选框和复选框...
  • anig2014
  • anig2014
  • 2015-04-03 11:06:32
  • 994

Html简易表单制作

(以百度注册表单为例)简易表单制作
  • u011195636
  • u011195636
  • 2015-09-12 19:08:08
  • 2511

html <table>表单排序

  • 2010年08月25日 11:07
  • 8KB
  • 下载

html表单所有类型

表单输入框的类型
  • u014306354
  • u014306354
  • 2016-09-06 01:50:13
  • 2535

HTML-做一个网页的注册登记表单

/* *Copyright (c) 2017,烟台大学计算机学院 All rights reserved. *文件名称:关于HTML的练习 *作 者:张晴晴 *完成日期:201711月5...
  • qq_34216631
  • qq_34216631
  • 2017-11-05 10:17:55
  • 2287

HTML——form表单/个人信息

姓名: 密码: 性别:             男             女                        喜爱的运动:篮球                     ...
  • Chenbaby_
  • Chenbaby_
  • 2016-11-15 19:36:12
  • 3181

html注册登录表单

  • 2015年12月16日 21:14
  • 4KB
  • 下载

HTML表单用户注册

  • 2014年06月06日 20:01
  • 8KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 9582
    积分: 491
    排名: 10万+
    博客专栏
    最新评论