지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

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

不言
풀어 주다： 2018-08-09 15:16:44
원래의
2621명이 탐색했습니다.

이 문서의 내용은 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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span style="color:red;" id="wrong-massage"></span><br />
        <form onsubmit="return check()">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input id="name"  placeholder="请输入用户名" onblur="check_name()" ></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input id="pw" type="password" placeholder="请输入密码" onblur="check_pw()"></td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td><input id="pw-check" type="password" placeholder="请输入确认密码"/></td>
                </tr>
            </table>
            <input type="radio" name="sex" value="0"/>男
            <input type="radio" name="sex" value="1"/>女
            <br />
            <input type="checkbox" name="hobby" value="0"/>羽毛球
            <input type="checkbox" name="hobby" value="1"/>篮球
            <input type="checkbox" name="hobby" value="2"/>乒乓球
            <input type="checkbox" name="hobby" value="3"/>足球
            <br />
            <select id="grade">
                <option value="1">大一</option>
                <option value="2">大二</option>
                <option value="3">大三</option>
                <option value="4">大四</option>
            </select>
            <br />
            <td><input type="reset" value="重置" /></td>
            <td><input type="submit" value="注册"/></td>
        </form>
        <script>
            //使用$()函数可节省代码量
            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;i<sex.length;i++){
                    sex[i].disabled=true;
                    console.log(sex[i].checked+" "+sex[i].value);
                }

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

                for(var i=0;i<hobby.length;i++){
                    hobby[i].checked = true;
                    console.log(hobby[i].checked+" "+hobby[i].value);
                }

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


                var select = document.getElementById("grade");
                var options = select.options;
                console.log(select.length);
                console.log(select.selectedIndex);
                console.log(options[select.selectedIndex].value);
                for(var i=0;i<options.length;i++){
                    var option = options[i];
                    console.log(option.value)
                    select.disabled = true;
                }
                return false;
            }

            function check_name(){
                var n = document.getElementById("name");
                var msg = document.getElementById("wrong-massage");

                if(n.value.length>12){
                    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 = " ";
                }
            }
        </script>
    </body>
</html>
로그인 후 복사

Image 개체

Image 개체 속성

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

관련 추천:




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

관련 라벨：
javascript
원천：php.cn
이전 기사：애니메이션 효과를 얻기 위해 HTML과 CSS3에서 2D와 3D를 결합 다음 기사：HTML의 메타 태그 사용 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿