首页 > Web开发 > 详细

HTML笔记三,表单相关元素和属性

时间:2016-01-21 23:59:59      阅读:464      评论:0      收藏:0      [点我收藏+]

表单元素

<form>:用于生成输入表单,该元素不可视化
  action:指定当前表单提交的地址,必填
  method:指定提交表单时发送何种类型的请求,post或者get,一般post,必填;其中GET方式可以在地址栏种看到传送的数据,POST方法看不到较安全
  enctype:指定对表单内容进行编码的字符集
  name:名称
  target:以何种方式打开目标url,_self,_blank,_top,_parent四个中的一个
 
<input>:
  type=
    text:单行文本框
    password:密码输入框
    hidden:隐藏域
    radio:单选框
    checkbox:复选框
    image:图像域
    file:文件上传域
    submit,reset,button:———
  checked:设置单选框复选框的选中状态
  disabled:表示元素被禁用
  maxlength:指定文本框中所允许输入的最大字符数
  readonly:表示不允许用户修改
  size:指定元素的宽度
  src:指定图像域所显示图像的URL
 
<label>:定义标签
  for:表示所相关联表单控件的id值
 
<button>:定义一个按钮
  disable:指定是否禁用按钮
  name:指定唯一名称,一般与id值相同
  type:指定按钮类型,button,reset,submit其中之一
  value:指定按钮的初始值
 
<select>:创建列表框和下拉菜单,必须和<option>结合使用
  multiple:允许多选
  size:设置该列表框的高度
<option>表示一个列表项或者菜单项
<optgroup>用于定义列表项或者菜单项,只能包含<option>
 
<textarea>:设置多行文本框
  cols:指定文本域的宽度,必填
  rows:指定文本框的高度,必填
  disabled:禁用此文本域
  readonly:设置为只读
 
HTML5新增表单中的属性与元素
1、为表单控件添加了form属性,form=“一个form表单的id”,则它也属于这个表单的,当提交表单时,此控件也会提交相关参数
2、formaction:对按钮设置不同的formaction则会提交到不同的对应逻辑
3、formXXXX属性:formenctype,formmethod,formtarget通过这些属性均可以让按钮动态的改变表单的相关属性
4、autofocus属性:自动获得焦点
5、placeholder属性:文本框中的灰色字体提示信息
6、list与datalist属性:文本框中类似历史记录的东西
7、autocomplete属性:为on则会显示datalist下拉菜单,off则不会显示datalist下拉菜单
8、<output>元素:用于显示输出,比如计算结果或者脚本的输出,必须属于某个表单;使用for属性来表示显示那个元素的值(本次未显示出output数据)
9、type=“file”,允许进行多个文件的上传,accept:控制允许上传文件的类型;multiple:设置是否允许选择多个文件。
 
<input>中的type=:
  color:颜色选择器
  date:日期选择器
  time:时间选择器
  datetime:UTC日期、时间选择器
  datetime-local:本地日期、时间选择器
  week:供用户选择第几周的文本框
  month:月份选择器
  email:Email输入框,需要符合emaile的格式
  tel:只能输入电话号码的输入框,输入任意字符串
  url:URL输入框
  number:只能输入数字的数字输入框
  range:拖动条,min设置最小值,max设置最大值,step设置步长
  search:专门用于搜索的文本框,与type=“text”无太大区别
 
使用FileReader获取文件内容
readAsText(file,encoding):以文本方式来读取文件,encoding为编码方式,默认为utf-8。
readAsBinaryString(file):以二进制方式来读取文件,这样就可以通过Ajax方式来上传至服务器。
readAsDataURL(file):以DataURL方式来读取文件
abort():停止读取
onloadstart:开始读取数据时,触发该事件指定的函数
onprogress:正在读取时,触发该事件指定的函数
onload:成功读取数据后,触发该事件的函数
onloadend:读取数据完成后,无论成功与失败,都触发该事件指定的函数
onerror:读取失败时,触发该事件指定的函数
<progress>可以用来显示文件的读取进度
 
HTML5新增的客户端校验
require:指定该控件必须填写
pattern:此控件的值必须符合指定的正则表达式
min,max,step
调用checkValidity方法来进行校验
使用setCustomValidity来自定义错误提示

 

HTML笔记三,表单相关元素和属性

原文:http://www.cnblogs.com/likaopu/p/5149638.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!