>  기사  >  웹 프론트엔드  >  HTML 객체: HTML의 일부 객체 속성 소개

HTML 객체: HTML의 일부 객체 속성 소개

不言
不言원래의
2018-08-09 15:16:442569검색

이 문서의 내용은 HTML 개체에 대한 내용입니다. html의 일부 개체 속성에 대한 소개입니다. 특정 참조 값이 있으므로 도움이 필요한 경우 참조할 수 있습니다.

양식 개체

양식 개체 메서드

reset(): 양식의 모든 입력 요소를 기본값으로 재설정합니다.

submit(): 양식을 제출합니다.

텍스트 개체

텍스트 개체 속성

disabled: 텍스트 필드를 비활성화할지 여부를 설정하거나 반환합니다.

readOnly: 텍스트 필드가 읽기 전용인지 여부를 설정하거나 반환합니다.

value: 텍스트 필드의 value 속성 값을 설정하거나 반환합니다.

텍스트 개체 메서드

focus(): 텍스트 필드에 포커스를 설정합니다.

Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input name = "wd" />
            <input type="submit" value="百度一下" onclick="sub()">
        </form>
        <script>
            var form = document.getElementsByTagName("form")[0];
            var text = document.getElementsByName("wd")[0];
            text.focus();
            function sub(){
                var text = document.getElementsByName("wd")[0];
//              text.value = "魔道";
//              text.readOnly = "true";
//              console.log(text.readOnly);
//              text.disabled = "true";
                console.log(text.disabled);
                text.focus();
            }
            //type为text、password、textarea的标签均有value、focus、disabled、readOnly
        </script>
    </body>
</html>

Radio object

Radio object property

checked: 라디오 버튼의 상태를 설정하거나 반환합니다.

disabled: 라디오 버튼의 비활성화 여부를 설정하거나 반환합니다.

value: 라디오 버튼의 value 속성 값을 설정하거나 반환합니다.

Checkbox 개체

Checkbox 개체 속성

checked : 확인란을 선택해야 하는지 여부를 설정하거나 반환합니다.

disabled : 체크박스를 비활성화할지 여부를 설정하거나 반환합니다.

value : 체크박스의 value 속성 값을 설정하거나 반환합니다.

객체 선택

객체 컬렉션 선택

options[] : 드롭다운 목록의 모든 옵션을 포함하는 배열을 반환합니다.

객체 속성 선택

disabled: 드롭다운 목록을 비활성화할지 여부를 설정하거나 반환합니다.

length: 드롭다운 목록의 옵션 수를 반환합니다.

selectedIndex: 드롭다운 목록에서 선택한 항목의 색인 번호를 설정하거나 반환합니다.

객체 방법 선택

add(): 드롭다운 목록에 옵션을 추가합니다.

remove(): 드롭다운 목록에서 옵션을 제거합니다.

Option 개체

Option 개체 생성 방법

Option(text,value): 텍스트와 값 값을 통해 Option 개체 생성 ​​

Option 개체 속성

selected: 선택한 속성의 값을 설정하거나 반환 .

text: 옵션의 일반 텍스트 값을 설정하거나 반환합니다.

value: 서버로 전송되는 값을 설정하거나 반환합니다.

Select 개체 및 Option 개체 예제

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="grade">
            <option  value="1">一年级</option>
            <option  value="2">二年级</option>
            <option  value="3">三年级</option>
            <option  value="4">四年级</option>
        </select>
        <input type="button" onclick="text()" value="按钮" />
        <script type="text/javascript">
            function text(){
                var select = document.getElementById("grade");
                console.log(select.disabled);
                console.log(select.length);
                console.log(select.selectedIndex);

                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`")

                var options = select.options;
                console.log(options[select.selectedIndex].value);

                console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")

                for(var i=0;i<options.length;i++){
                    console.log(options[i].value);
                    console.log(options[i].selected);
                    console.log(options[i].text);
                }

                var option = new Option("五年级","5");
                select.add(option);
                select.remove(0);
            }   
        </script>
    </body>
</html>

Registry

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d
        adaa35323c0e774c3401f5eeaad021b854bdf357c58b8a65c66d7c19c8e4d114ff9d32c555bb1d9133a29eb4371c1213
        a3c38c5df3bd0ef801eff20f09d68ae6
            f5d188ed2c074f8b944552db028f98a1
                a34de1251f0d9fe1e645927f19a896e8
                    b6c5a531a458a2e790c1fd6421739d1c用户名:b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c66677a7cbdbf26f5b4be8dede2fe353db90dd5946f0946207856a8a37f441edf
                fd273fcf5bcad3dfdad3c41bd81ad3e5
                a34de1251f0d9fe1e645927f19a896e8
                    b6c5a531a458a2e790c1fd6421739d1c密码:b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c9589aa3b033daf74e59b78a53d583ed9b90dd5946f0946207856a8a37f441edf
                fd273fcf5bcad3dfdad3c41bd81ad3e5
                a34de1251f0d9fe1e645927f19a896e8
                    b6c5a531a458a2e790c1fd6421739d1c确认密码:b90dd5946f0946207856a8a37f441edf
                    b6c5a531a458a2e790c1fd6421739d1c6d13c2159bf38342899a7d768b94f482b90dd5946f0946207856a8a37f441edf
                fd273fcf5bcad3dfdad3c41bd81ad3e5
            f16b1740fad44fb09bfe928bcc527e08
            3ea5dbfd399b8f71042a18725f567918男
            ad881942639cffcc4579c376971b3fd0女
            ff9d32c555bb1d9133a29eb4371c1213
            d1e0b01b1506f8728873336b6865bf7a羽毛球
            3e539ce442c5e67a6c62e8a5c36157f9篮球
            ebae056c174c155368d696d5878bbb83乒乓球
            a33e9cbdec54ff9234e2ba5d2597fa26足球
            ff9d32c555bb1d9133a29eb4371c1213
            f37074c1351f94297e4cf97b2ab2681e
                859be17dfcd6af2d26185135fb5bd8fc大一4afa15d3069109ac30911f04c56f3338
                656b9f2e82088a1bf3f244445950414e大二4afa15d3069109ac30911f04c56f3338
                9403fa44e4282955565dbaeb33a85ca2大三4afa15d3069109ac30911f04c56f3338
                0df899068b02ff57e98d12c8174c0b32大四4afa15d3069109ac30911f04c56f3338
            18bb6ffaf0152bbe49cd8a3620346341
            ff9d32c555bb1d9133a29eb4371c1213
            b6c5a531a458a2e790c1fd6421739d1c3f1a3b04c1bd97ce66681e2e90414dc0b90dd5946f0946207856a8a37f441edf
            b6c5a531a458a2e790c1fd6421739d1cc3086de9e33a2a167c44c4932c789135b90dd5946f0946207856a8a37f441edf
        f5a47148e367a6035fd7a2faa965022e
        3f1c4e4b6b16bbbd69b2ee476dc4f83a
            //使用$()函数可节省代码量
            function $(id){
                return document.getElementById(id);
            }

            function check(){
                var n = document.getElementById("name");
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");
                var c = document.getElementById("pw-check");

                if(n.value.length>12){
                    msg.innerHTML = "用户名不能超过15个字符,请重新输入!";
                    n.focus();
                    return false;
                }
                if(n.value.length==0){
                    msg.innerHTML = "用户名不能为空,请重新输入!";
                    n.focus();
                    return false;
                }
                if(w.value.length>12){
                    msg.innerHTML = "密码不能超过12个字符,请重新输入!";
                    w.focus();
                    return false;
                }
                if(w.value.length==0){
                    msg.innerHTML = "密码不能为空,请重新输入!";
                    w.focus();
                    return false;
                }
                if(w.value!=c.value){
                    msg.innerHTML = "密码错误,请重新输入!";
                    c.focus();
                    return false;
                }

                var sex = document.getElementsByName("sex");
                var hobby = document.getElementsByName("hobby");
                for(var i=0;i515c4b6db14d7592195e587d6086cf6312){
                    msg.innerHTML = "用户名不能超过15个字符,请重新输入!";
                    n.value = "";
                    n.focus();
                }
                else if(n.value.length==0){
                    msg.innerHTML = "用户名不能为空,请重新输入!";
                    n.focus();
                }
                else{
                    msg.innerHTML = " ";
                }
            }
            function check_pw(){
                var w = document.getElementById("pw");
                var msg = document.getElementById("wrong-massage");

                if(w.value.length>12){
                    msg.innerHTML = "密码不能超过12个字符,请重新输入!";
                    w.value = "";
                    w.focus();
                }
                else if(w.value.length==0){
                    msg.innerHTML = "密码不匹配,请重新输入!";
                    w.focus();
                }
                else
                {
                    msg.innerHTML = " ";
                }
            }
        2cacc6d41bbb37262a98f745aa00fbf0
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Image 개체

Image 개체 속성

src: 이미지의 URL을 설정하거나 반환합니다.

관련 추천:




위 내용은 HTML 객체: HTML의 일부 객체 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.