[attribute] HTML - disabled 속성 - 요소 비활성화 지정 (= disabled속성 = 디스에이블드속성|디세이블드속성) ※ 사용못하게 설정

1. disabled 예제 - <button> 경우
2. disabled 정의
3. disabled 구문
4. disabled 예제 - <fieldset> 경우
5. disabled 예제 - <input> 경우
6. disabled 예제 - <optgroup> 경우
7. disabled 예제 - <option> 경우
8. disabled 예제 - <select> 경우
9. 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>

결과보기