HTML 객체: HTML의 일부 객체 속성 소개-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

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

不言

Aug 09, 2018 pm 03:16 PM

javascript

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

nbsp;html>

    
        <meta>
        <title></title>
    
    
        <span></span><br>

用户名：
密码：
确认密码：

            男             女
            羽毛球             篮球             乒乓球             足球

Image 개체

Image 개체 속성

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

관련 기사

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM

메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.