HTML表单
作者：互联网
创建表单
可以使用<form><form/>标记来声明表单的开始和结束位置。<from>元素包含很多属性，action属性可以确定把表单提交到什么地方；method属性可以确定如何提交信息；target属性可以确定将表单的响应加载到哪个框架上。一次只能提交页面中的一个表单的信息。
<form name="myform"> </form>
<form>标记会创建一个HTMLFormElement对象来访问这个表单。那么，如何访问这个对象呢？
第一，可以直接使用document.myform来访问这个对象。第二，可以使用document.forms[0]来访问这个对象。
共有的属性和方法
可以通过form对象的elements属性（是一个集合）来访问HTML表单中的常用控件。同样的，preventDefault()方法也同样适用于form表单。
大多数的表单都是通过<input/>元素创建的，所以所有的表单都共享几个属性和方法。
1.name（可以使用这个属性的值来引用元素）
2.value（返回元素的值）
3.form（返回包含当前元素的form对象，一般用来检查表单中数据的有效性）
4.type（返回元素的类型）
5.focus()和blur方法()（获得焦点和失去焦点）
这两个方法比较常用，但是除了这两个方法外，所有的表单元素对象还有onfocus和onblur事件处理程序。当用户获得或失去焦点的时候，将会触发这两个事件处理程序，一般onblur事件处理程序适用于刚失去焦点元素的有效性。
bottom元素（type="button"）
//按钮元素（点击次数）
var parent_node = document.getElementById("h"),
form_node = document.createElement("form"),
button_node = document.createElement("input")
parent_node.appendChild(form_node)
form_node.appendChild(button_node)
form_node.setAttribute("name","form1")
button_node.setAttribute("type","button")
button_node.setAttribute("name","mybutton")
button_node.setAttribute("value","button click 0 times")
var numOfClick = 0
function myBtnClick(){
numOfClick++;
button_node.value ="button click "+numOfClick+" times"
}
button_node.addEventListener("click",myBtnClick)
单击submit按钮时，按钮所在表单中的数据将自动提交给服务器，无需编写任何脚本。使用submit()方法提交表单时，不会触发form对象的submit事件，也不会调用submit事件的监听器。
文本元素 （tyep="text"）
如果包含value属性，这个值会在页面加载的时候显示在文本框中。
text对象除了共有的focus和blur事件外，还有change，select，keydown，keyup，keypress事件等等。用户选择文本框的文本时，将触发select事件。
change事件，当且仅当文本框失去焦点时的值不等于它获得焦点时的值，才触发该事件。可以使用input元素的readonly属性防止修改文本框内容。
//简单验证功能的表单
var myForm = document.form1
function btnCheckFromClick(e){
var txtName = myForm.txtName
var txtAge = myForm.txtAge
if(txtAge == "" || txtName == ""){
alert("please complete all of the form")
if(txtName.value == ""){
txtName.focus()
}else{
txtAge.focus()
}
}else{
alert("thanks for completing the form "+txtName.value)
}
}
function txtAgeBlur(e){
var target = e.target
if(isNaN(target.value)){
alert("please enter a valid age")
target.focus()
target.select()
}
}
function txtNameChange(e){
alert("hi"+e.target.value)
}
myForm.txtName.addEventListener("change",txtNameChange)
myForm.txtAge.addEventListener("blur",txtAgeBlur)
myForm.btnCheckForm.addEventListener("click",btnCheckFromClick)
//仅供参考，有bug
密码文本框（type="password"）
隐藏文本框（type="hidden"）
作用：将前面页面的用户信息保存在隐藏文本框中，在最终页面上将信息提交给服务器。
多行文本框 <textarea>元素
属性：1.cols和rows 2.wrap换行功能（有soft和hard两个值 其中soft：自动换行 hard：回车即发送给服务器）
注：Windows上的回车符为\r\n Unix类系统回车符为\n \n是通用的换行符
复选框和单选按钮
相同属性：
checked="checked"
复选框（type="checkbox"）
单选按钮（type="radio"）
每个radio标签的name属性值应该一致
选择框
<select><option></option></select>
select元素的属性：
size：规定用户能直接看到的选项数
selected：页面加载时默认选中
multiple：规定多选
<form name="theForm">
<select name="theDay" id="" size="1" multiple="true"> <option value="0">Monday</option> <option value="1">Tuesday</option> <option value="2">Wednesday</option> <option value="3">Thursday</option> <option value="4">Friday</option> <option value="5">Saturday</option> <option value="6">Sunday</option> </select>
</form>
//当选择size=1时，是否使用multiple属性又会使样式变得不一样
那么如何访问选项呢？
select元素会创建一个HtmlSelectElement对象（select对象），该对象有一个集合属性Options，由HTMLOptionElement对象组成（option对象）。
如果要访问Monday创建的选项，那么可以使用下列代码：
document.theForm.theDay.options[0]//可以灵活使用options集合的length属性
那么如何确定用户选择了哪些选项？
使用select对象的selectIndex属性。该属性返回的索引值和option集合就可以访问选中的选项。
option对象还有挺多属性的，如index（返回选项在options集合中的索引位置），text（列表中显示的内容），value（定义的值，如果提交表单，该属性会传送给服务器）等属性。
1.普通添加和删除选项
//添加
var mynewoption = new Option("thetext","newoption") document.theForm.theDay.options[7] = mynewoption //选中options[0]的话会直接覆盖原值
//删除
document.theForm.theDay.option[7] = null
2.标准添加和删除方法
使用select对象的add()和remove()方法
add()方法接收两个参数，第一个为要添加的option对象，第二个为要添加选项的索引位置，add()方法不会覆盖索引位置上已有的option对象，向后移动腾出空间，这点和普通添加不同，若第二个参数值为空或null，则默认添加到最后一个。
remove()方法接收一个参数，为要删除对象的索引值
3.选择元素的事件
选择元素有三个事件：blur，focus，change（用户改变列表选择的选项时触发）
HTML5表单对象的属性和方法
新类型：
<form>
<input type="color" placeholder="颜色">
<input type="date" placeholder="不允许输入，年月日">
<input type="email" placeholder="邮件">
<input type="month" placeholder="允许输入，月份">
<input type="number" placeholder="数字">
<input type="range" placeholder="内置滑块" min="0" max="10" step="1">
<input type="search" placeholder="单行文本输入">
<input type="tel" placeholder="电话号码">
<input type="time" placeholder="允许输入时间，时分">
<input type="url" placeholder="绝对URL控件">
<input type="week" placeholder="不允许输入，年周">
</form>
新属性：
autocomplete //指定控件的值由浏览器填好 autofocus // 确定加载是是否有焦点 form //相关表单的id，如果指定控件可以放在文档的任意位置，如果不指定则控件只能放在表单上 maxLength //指定用户可以输入的最大字符数 pattern //根据该正则表达式检查控件的值 placeholder //提示 required // 指定在提交表单前用户必须给字段填入的值
新元素：
<output/>//用于显示计算结果 <meter/>//值的图形化显示 <progress/>//任务的已完成进度
//IE9,10,11不支持meter和progress，这三个元素都可以放在页面的任何位置，不一定要放在form表单中
//output经典例子
<form action="" id="form2" name="form2">
<p>
<label for="minValue">Min:</label>
<input type="number" id="minValue" name="minValue">
</p>
<p>
<label for="stepValue">Step:</label>
<input type="number" id="stepValue" name="stepValue">
</p>
<p>
<label for="maxValue">Max:</label>
<input type="number" id="maxValue" name="maxValue">
</p>
<p>
<input type="range" id="slider" name="slider">
</p>
</form>
<output id="result" name="result" form="form2" for="slider"></output> //把for属性设置为slider，表示output元素显示与range字段相关的值
<script>
var myForm = document.form2,
output = myForm.result
function formInputtChange(){
var slider = myForm.slider;
slider.min = parseFloat(myForm.minValue.value)
slider.max = parseFloat(myForm.maxValue.value)
slider.step = parseFloat(myForm.stepValue.value)
result.value = slider.value
}
myForm.addEventListener("input",formInputtChange)
</script>
//经管output元素不在表单中，但是使用了for属性，所以它仍然关联到表单中
<meter min="0" low="40" high="100" max="120" optimum="75" value="75">80 units of something</meter> //位于0~40,75~120就会变色，范围影响颜色 <progress max="100" value="40"></progress> //简单的进度条
标签：node,myForm,form,value,表单,HTML,属性 来源： https://www.cnblogs.com/hzyang/p/13092971.html