美文网首页
html5 表单元素

html5 表单元素

作者: allenMun | 来源:发表于2016-01-23 15:15 被阅读0次

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:设置列数

相关文章

  • HTML5 表单元素

    HTML5 新的表单元素HTML5有以下新的表单元素 ?:不是所有的浏览器都支持HTML5新的表单元素,但是你...

  • HTML5 表单元素

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素: datali...

  • h5表单

    html5 表单 新增input类型 新增表单元素 html5表单验证 新增表单属性 新增的input类型 inp...

  • 2019-10-18 HTML

    1.html新表单元素 HTML5 表单元素 HTML5 增加了如下表单元素: 注释:默认地,浏览器不会显示未知元...

  • HTML5 表单元素+属性

    HTML5 新的表单元素 HTML5 有以下新的表单元素: < datalist> 注意:不是所有的浏览器都支持H...

  • HTML5中的表单元素

    本节重点 HTML5中添加了许多新特性的表单元素 表单元素主要表现在 元素Element + 类型Type + 属...

  • HTML5新增元素

    HTML5新增元素 类别元素构建页面的语义元素 用于标识文本的语义元素 web表单 ...

  • HTML5新增表单元素

    表单新特性 1、form属性 在html4中表单内的从属元素必须写在表单内部,而在html5中,指定form元素的...

  • HTML5 新元素

    新的语义/结构元素 HTML5提供的新的元素可以构建更好的文档结构: 新的表单元素 新的输入类型 HTML5 - ...

  • 前端基础知识:html5新增表单属性

    ?form属性 通常,从属于表单的元素必须放在表单内部。但是在HTML5中,可以把从属于表单的元素放在任何地方,然...

网友评论

      本文标题:html5 表单元素

      本文链接:https://www.haomeiwen.com/subject/hcdrkttx.html