HTML表单

2021-01-30 00:15

阅读：614

标签：rda maxlength rms list bottom == ide var required

创建表单

　　可以使用

标记来声明表单的开始和结束位置。元素包含很多属性，action属性可以确定把表单提交到什么地方；method属性可以确定如何提交信息；target属性可以确定将表单的响应加载到哪个框架上。一次只能提交页面中的一个表单的信息。

标记会创建一个HTMLFormElement对象来访问这个表单。那么，如何访问这个对象呢？

　　第一，可以直接使用document.myform来访问这个对象。第二，可以使用document.forms[0]来访问这个对象。

共有的属性和方法

　　可以通过form对象的elements属性（是一个集合）来访问HTML表单中的常用控件。同样的，preventDefault()方法也同样适用于form表单。

大多数的表单都是通过元素创建的，所以所有的表单都共享几个属性和方法。

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"）

　　作用：将前面页面的用户信息保存在隐藏文本框中，在最终页面上将信息提交给服务器。

多行文本框元素　

　　　属性：1.cols和rows　　2.wrap换行功能（有soft和hard两个值　　其中soft：自动换行　　hard：回车即发送给服务器）

注：Windows上的回车符为\r\n　　Unix类系统回车符为\n　　\n是通用的换行符

复选框和单选按钮

　　相同属性：
　　　　checked="checked"

　　复选框（type="checkbox"）

　　单选按钮（type="radio"）

　　　　　每个radio标签的name属性值应该一致

选择框

　　select元素的属性：

　　　　size：规定用户能直接看到的选项数

　　　　selected：页面加载时默认选中

　　　　multiple：规定多选

　　

//当选择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表单对象的属性和方法

　　新类型：

　　新属性：

autocomplete   　//指定控件的值由浏览器填好
autofocus       // 确定加载是是否有焦点
form            //相关表单的id，如果指定控件可以放在文档的任意位置，如果不指定则控件只能放在表单上
maxLength       //指定用户可以输入的最大字符数
pattern         //根据该正则表达式检查控件的值
placeholder    //提示
required       // 指定在提交表单前用户必须给字段填入的值

　　新元素：

//用于显示计算结果
//值的图形化显示
//任务的已完成进度
//IE9,10,11不支持meter和progress，这三个元素都可以放在页面的任何位置，不一定要放在form表单中

//output经典例子

for="slider">　　//把for属性设置为slider，表示output元素显示与range字段相关的值
//经管output元素不在表单中，但是使用了for属性，所以它仍然关联到表单中

80 units of something//位于0~40,75~120就会变色，范围影响颜色
//简单的进度条

HTML表单

标签：rda maxlength rms list bottom == ide var required

原文地址：https://www.cnblogs.com/hzyang/p/13092971.html

上一篇：php高德轨迹

下一篇：【CSS__宽度】css width: auto;和width: 100%;的区别

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML表单
文章链接：http://soscw.com/index.php/essay/48913.html

亲，登录后才可以留言！

HTML表单

评论

热门文章

推荐文章

最新文章

置顶文章