前端学习（七十五） DOM-表单元素（Dom）

form元素

定义了一块区域，表示这块区域是表单元素

form元素包含了以下属性

accept-charset：定义服务器端应该支持的字符编码
action：定义了from提交的地址
autocomplete：设置的表单的字段补全规则，默认值on
enctype：是from提交给服务器的编码类型
method：定义了使用哪种HTTP方式提交
name：定义了from的名字
novalidate：定义了提交表单是不对其进行验证
target：定义了提交后在哪里接收服务器的返回内容

示例：

        <form
        accept-charset="utf-8"
        action="/api/login"
        autocomplete
        enctype="application/x-www-form-urlencoded"
        method="POST"
        name="login"
        novalidate
        target="_self"
        >

        </form>

name

定义了表单的名字，在html中必须是唯一的，可以通过name获取到指定的表单元素，通过getElementsByTagName获取到from的集合后，通过下标获取

            var forms=document.getElementsByTagName('form')
            forms[0] === forms['login']    //都可以获取到表单

autocomplete

设置的表单的字段补全规则，默认值on，如果是默认或者是on，那么如果之前输入过的内容当再次输入时，会自动显示填入，设置为off的话则不会补全

HTMLFormElement.elements

            var forms=document.getElementsByTagName('form')
            forms['login'].elements    //可以显示表单中所有的控件元素

这个属性是一个只读属性

HTMLFormElement.reset()

扫描二维码关注公众号，回复： 2873520 查看本文章

将表单内容重置，也就是清空

表单元素

常见的元素有：input，select / optgroup / iption，textare，label，button，fieldset/legend，progress，output（IE不支持），meter（IE不支持）

元素常见的通用基本属性：name，value，disabled，autofocus，form

type：类型
name：元素的名称，假如多个元素拥有相同的name时，访问name将返回一个数组
value：值
disabled：当元素disabled时，除了元素不可编辑不可操作外，form提交时也不会被提交到服务
autofocus：控件自动获得焦点，但是页面中只有一个元素可以自动获得焦点
form：定义元素所归属的表单

input元素

常见的type类型：

hidden：不显示在页面上的控件，但是也会被提交到服务器
url：默认输入必须是url的格式，默认会验证是否是一个url格式的输入
email：默认输入必须是email的格式，默认会验证是否是一个email格式的输入
password：用于输入密码，内容不可见
date：用于输入时间的控件
number：浮点数的控件
range：用于输入一个不精确的值
color：指定颜色
checkbox：复选框
radio：单选框
file：可以选择文件
button：按钮

select元素

示例：

        <select>
            <optgroup label="1.0">  <!--分组-->
                <option>1</option>  <!--选项-->
                <option>1</option>
                <option>1</option>
                <option>1</option>
            </optgroup>
            <optgroup label="2.0">
                <option>1</option>
                <option>1</option>
                <option>1</option>
                <option>1</option>
            </optgroup>
        </select>

常用属性

multiple：是否支持多选

options：集合

add/remove：添加/删除

textarea元素

特有的常用属性

select()：用于全选输入的内容并且触发select事件

selectionStart / selectionEnd / selectDirection：选中内容的起始位置 / 结束位置，假如没有选中的内容，将返回光标的位置，/ 选择的方向

setSelectionRange()：设置内容

setRandgText()：设置范围内容

button元素

submit：默认，提交表单

reset：重置表单

前端学习（七十五） DOM-表单元素（Dom）

猜你喜欢