목차
- disabled 예제 - <button> 경우
- disabled 정의
- disabled 구문
- disabled 예제 - <fieldset> 경우
- disabled 예제 - <input> 경우
- disabled 예제 - <optgroup> 경우
- disabled 예제 - <option> 경우
- disabled 예제 - <select> 경우
- disabled 예제 - <textarea> 경우
disabled 예제 - <button> 경우
<button type="button" disabled>클릭</button>
결과보기
disabled 정의
요소 비활성화 지정.
1. disabled 속성 사용 가능 태그 종류
<button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>
2.
- disabled 지정된 텍스트는 사용 못 함. (즉, 클릭/선택/복사: X)
- 지정 조건 충족시까지 disalbed 속성 사용해 비활성화 시킨 후, 조건 충족 시 JS로 disabled 속성 제거해 활성화시킬 수도 있음.
- disabled 지정된 요소의 폼데이터는 서버로 제출 X
3.
- <button> - 모든 브라우저 지원.
- <fieldset>- 모든 브라우저 지원. (IE11 이하 및 Safari 6 이하 X)
- <input> - 모든 브라우저 지원.
- <optgroup> - IE8 이상 모든 브라우저 지원.
- <option> - IE8 이상 모든 브라우저 지원.
- <select> - IE9 이상 모든 브라우저 지원.
- <textarea> - 모든 브라우저 지원.
disabled 구문
- <button disabled>
- <fieldset disabled>
- <input disabled>
- <optgroup disabled>
- <option disabled>
- <select disabled>
- <textarea disabled>
[속성값]
없음.
disabled 예제 - <fieldset> 경우
<form action="/action_page.php">
<fieldset disabled>
<legend>자기소개</legend>
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<label for="nick">별명:</label>
<input type="text" id="nick" name="nick"><br><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">생일:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="확인">
</fieldset>
</form>
결과보기
disabled 예제 - <input> 경우
<form action="/action_page.php">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="nick">별명:</label>
<input type="text" id="nick" name="nick" disabled><br>
<input type="submit" value="확인">
</form>
결과보기
disabled 예제 - <optgroup> 경우
<form action="/action_page.php">
<label for="langs">언어 선택</label>
<select name="langs" id="langs">
<optgroup label="브라우저측 언어">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="서버측 언어" disabled>
<option value="php">PHP</option>
<option value="sql">SQL</option>
</optgroup>
</select><br>
<input type="submit" value="확인">
</form>
결과보기
disabled 예제 - <option> 경우
<form action="/action_page.php">
<label for="langs">언어선택:</label>
<select name="langs" id="langs">
<option value="html" disabled>HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<br><br>
<input type="submit" value="확인">
</form>
결과보기
disabled 예제 - <select> 경우
<form action="/action_page.php">
<label for="langs">언어선택:</label>
<select name="langs" id="langs" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JS</option>
</select>
<br><br>
<input type="submit" value="확인">
</form>
결과보기
disabled 예제 - <textarea> 경우
<textarea disabled>홈짱닷컴 Homzzang.com</textarea>
결과보기