其他分享
首页 > 其他分享> > HTML表单

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