집 > 기사 > 웹 프론트엔드 > HTML에서 이름, ID 및 클래스의 차이점은 무엇입니까?

HTML에서 이름, ID 및 클래스의 차이점은 무엇입니까?

php中世界最好的语言원래의: 2018-01-17 09:50:022805검색

이번에는 HTML에서 이름, ID, 클래스의 차이점이 무엇인지 보여드리겠습니다. 이름, 아이디, 클래스 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

name

라벨 이름을 지정하세요.

Format

<input type="text" name="username" />

응용 시나리오

①form form: name은 서버 양식 목록으로 전송되는 변수 이름으로 사용할 수 있습니다. 예를 들어 위의 서버로 전송되는 이름은 다음과 같습니다. .

②입력 유형='라디오' 라디오 선택 라벨: 여러 라디오 선택 라벨의 이름이 동일한 값으로 설정되면 라디오 선택 작업이 수행됩니다.

<input type="radio" name=&#39;sex&#39;/>男
<input type="radio" name=&#39;sex&#39;/>女

③동일한 이름을 가진 태그 그룹을 빠르게 가져오기: 동일한 이름을 가진 태그를 가져와 함께 작업(예: 속성 변경, 이벤트 등록 등)을 수행합니다.

function changtxtcolor() {
    var txts = document.getElementsByName(&#39;txtcolor&#39;); //获取所有name=txtcolor 的标签
    for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red
        txts[i].style.backgroundColor = &#39;red&#39;;
    }
}

Features

이름 속성의 값이 현재 페이지에서 고유하지 않습니다.

태그의 고유 식별자를 지정합니다.

Format

<input type=password  id="userpwd" />

Application Scenario

①제공된 고유 ID 번호를 기반으로 태그 개체를 빠르게 가져옵니다. 예: document.getElementById(id)

②는 레이블 레이블의 for 속성 값으로 사용됩니다. 예: d305c5282d143dd49e6374acc3c8c7aa사용자 이름: 8c1ecd4bb896b2264e0711597d40766c 이 라벨을 클릭하면 ID가 userid인 태그가 포커스를 받습니다.
기능

id 속성의 값은 현재 페이지에서 고유해야 합니다.

class

레이블의 클래스 이름을 지정하세요.

Format

<input type=button class="btnsubmit" />

응용 시나리오

①CSS 작업, 클래스에 특정 스타일을 추가합니다. 이 스타일의 태그가 필요한 경우 이 클래스를 추가할 수 있습니다.

Features

하나의 클래스 속성에 여러 클래스를 넣을 수 있지만 다음과 같이 공백으로 구분해야 합니다. class='btnsubmit btnopen'

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 많은 클래스를 보려면 여기로 오세요. 흥미로운 정보 PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!