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

表单元素

<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来自定义错误提示

时间: 01-19

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

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

H5表单新增元素和属性

1.form--把要提交的内容指定特定表单,而这个要提交内容不需要被包含在特定表单中. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="" id="testfor

HTML5 表单新增元素与属性&lt;一&gt;

form属性:在HTML4中,表单内的从属元素必须书写在表单内部,而在HTML5中,可以书写在页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. <!DOCTYPE html> <html> <head lang="en"> <title>form属性</title> <meta charset="utf-8"> </head&g

表单的元素和样式表

<body><form action="ae.html" method="post"><input type="text" name="gandong" value="hello"/><input type="password" name="gandong value="1234"/><input typ

AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

表单的属性和方法, 获取表单和表单的元素, 验证表单

表单的属性和方法 一. 表单字段的属性(id/name/value/form),这里用value属性来举例 上面的form属性代表获取表单字段的父级表单对象 1. 属性的获取         console.log(document.myform.username.value); 2. 属性的设置            document.myform.username.value="123"; 3. 获取表单字段的父级表单对象 console.log(document.myform.u

表单及表单新增元素

要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解. 表单的基本了解  <form> 元素用于用户输入数据的收集  <input> 元素是最重要的表单元素,有许多type其中<input type="submit">是用于向表单处理程序提交表单的按钮.  <select> 元素<option> 元素定义待选择的下拉列表选项,  <textarea> 元素定义文本区域.  <button&

jQuery获取表单各元素的值

radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio']").eq(1).attr("checked",true);//设置第二项为选中项 <input type="text" name="textname" id="text_id" value="&quo

【Unity 3D】学习笔记三十三:游戏元素——天空盒子

天空盒子 一般的3D游戏都会有着北京百年一遇的蓝天,让人惊叹不已.其实天空这个效果没有什么神秘的只需用到天空盒子这个组件就行,可以将天空设想成一个巨大的盒子,这个盒子将整个游戏视图和所有的游戏元素包含其中.在unity中制作天空盒子非常方便,只需要像设置其他组件一样设置下就行了.在制作天空盒子之前,我们需要搜集一些天空的贴图,不过,unity很方便的为开发者提供了天空盒子的资源包.首先在project视图中点击鼠标右键,然后选择import package--skyboxes即可添加天空盒子的资