HTML의 <input> 태그 소개 및 비활성화 방법-HTML 튜토리얼-php.cn

HTML의 태그 소개 및 비활성화 방법

PHPz

풀어 주다： 2017-04-02 09:44:11

원래의

3215명이 탐색했습니다.

정의 및 사용법

태그는 사용자 정보를 수집하는 데 사용됩니다.
입력 필드에는 다양한 유형 속성 값을 기반으로 하는 다양한 형식이 있습니다. 입력 필드는 텍스트 필드, 체크박스, 마스크된 텍스트 컨트롤, 라디오 버튼, 버튼 등이 될 수 있습니다.
HTML과 XHTML의 차이점
HTML에서는 태그에 닫는 태그가 없습니다.
XHTML에서는 태그를 올바르게 닫아야 합니다.
예
두 개의 텍스트 입력 상자와 제출 버튼이 포함된 간단한 HTML 양식:

 
<form action="form_action.asp" method="get">  
  First name: <input type="text" name="fname" />  
  Last name: <input type="text" name="lname" />  
  <input type="submit" value="Submit" />  
</form>

로그인 후 복사

disabled 속성은 입력 요소가 비활성화되어야 함을 지정합니다.
비활성화된 입력 요소는 사용할 수도 없고 클릭할 수도 없습니다. 비활성화된 속성은 다른 조건(예: 확인란 선택 등)이 충족될 때까지 설정될 수 있습니다. 그런 다음 JavaScript를 사용하여 비활성화된 값을 제거하고 입력 요소의 값을 사용 가능으로 전환해야 합니다.

다음 세 가지 작성 방법으로 입력을 비활성화할 수 있습니다

<input type="text" disabled="disabled" value="已禁用" />  
<input type="text" disabled="disabled" value="已禁用" />  
<input type="text" disabled="disabled" value="已禁用" />

로그인 후 복사

비활성화된 입력은 기본적으로 회색으로 표시되며 CSS를 통해 스타일을 수정할 수 있습니다. 참고: IE9 이하는 글꼴 색상을 변경할 수 없습니다.
1. CSS3 :disabled 의사 요소를 사용하여

CSS Code复制内容到剪贴板
//Chrome Firefox Opera Safari   
input:disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

로그인 후 복사

를 정의합니다. 2. 속성 선택기를 사용하여

을 정의합니다.

CSS Code复制内容到剪贴板
//IE6 failed   
input[disabled]{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

로그인 후 복사

3. 클래스를 사용하여 정의하고 클래스를 추가합니다

CSS Code复制内容到剪贴板
input.disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

로그인 후 복사

최종 결과:

CSS Code复制内容到剪贴板
//Chrome Firefox Opera Safari IE9+   
input:disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}   
//IE8-   
input[disabled]{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}   
//IE6 Using Javascript to add CSS class "disabled"  
* html input.disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}

로그인 후 복사

참고: IE8 버그
IE8에서는:disabled를 인식하지 못하기 때문에 input[disabled]와 input:disabled 스타일을 따로 작성하거나 input[disabled]를 직접 사용할 수도 있습니다. ;IE9 이하에서는 글꼴 색상을 변경할 수 없습니다.

위 내용은 HTML의 태그 소개 및 비활성화 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!