html5 表单元素

2016-01-23  本文已影响0人  allenMun

1 表单元素
作用:表示用于获取影虎输入的数据
(1)form 设置html表单
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
属性
action:表示表单提交的页面
methd:表示表单的请求方式:有POST 和GET 两种,默认GET
autocomplete:设置用户自动完成功能

(2)input 用户输入数据的文本框
<input name="user" type="username">
属性
type:input 元素的类型
name:定义input 元素的名称,以便接收到相应的值

(3)<label> 添加说明标签
<p><label for="user">用户名:<input id="user" name="user"></label></p>

(4)<filedset>对表单进行编组
<fieldset>...</fieldset>
属性
name : 设置分组名称
<legend> : 设置分组名称
<fieldset>
<legend>注册表单</legend>
<p><label for="user">用户名:<input id="user" name="user"></label></p>
</fieldset>

(5) <button type="submit"></button> 添加一个按钮
属性
submit 表示按钮的作用是提交表单,默认
reset 表示按钮的作用是重置表单
button 表示按钮为一般性按钮,没有任何作用

2 input的类型
type类型
(1)<input type="text">
maxlength : 设置输入框的最大字符
size: 文本框宽度
value: 设置默认值
list : 为文本指定提供建议值的datalist元素
placeholder : 输入密码的提示
<input list="list" name="friuit" type="text">
<datalist id="list">
<option value="1">评估</option>
</datalist>

(2)<input type="password"> 隐藏字符的密码框
(3)<input type="checkbox">复选框,用户勾选
(4)<input type="radio"> 单选框,只能在几个中选一个
checked : 设置默认选中项
(5)<input type="submit"> 提交按钮
(6)<input type="reset"> 重置按钮
(7)<input type="button"> 普通按钮
(8)<input type="file"> 生成一个上传控件
(9)<inout type="img" src="image.jpg"> : 成一个图片按钮,点击图片就实现提交功能,并且传送了分区响应数据。图片按钮也提供了一些额外属性。
alt : 图片说明
src: 图片路径
(10)<input type="hiddden"> 生成一个隐藏控件

4 下拉菜单
<select name="fruit">
<optgroup label="果汁">
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">梨子</option>
</optgroup>
<optgroup label="水果">
<option value="1">苹果汁</option>
<option value="2">香蕉汁</option>
<option value="3">梨子汁</option>
</optgroup>
</select>
<optgroup > 下拉菜单分组
属性
name : 设定提交时的名称
size :设置下拉列表的高度
multiple :设置是否可以多选

5 多行文本
<textarea name="content" wrap="hard" rows="6" cols="9"> </textarea>
属性
rows : 设置行数
cols:设置列数

上一篇下一篇

猜你喜欢

热点阅读