TIL #07 HTML label

JohnKim·2021년 4월 7일
0

HTML

목록 보기
6/8
post-thumbnail

label

무언가 특별한 기능보다는 설명하기위해 이름표같은 역할을 한다.
label을 사용하게 되면 입력창 옆의 텍스트를 클릭해도 입력창이 선택된다.
labelinput을 연결하는 방법은 두가지이다.

<form action="http://localhost/hidden.php">
      <p>
            <label for="id_txt">text:</label> 방법1. for 속성에 id를 지정하고 input태그의 id속성을 같은 이름으로 지정하여 연결한다.
            <input id="id_txt" type="text" name="id" value="default value">
     </p>
     <p>     
       <label>password:</label> 방법.2 label태그 사이에 들어갈 내용을 작성한다.
       <input type="password" name="pwd" value="default val">
     </p> 
     <p>
       <label>textarea :
        <textarea rows="2'">default value</textarea>
       </label>
  </p>
  <p>
     <label>
        <input type="checkbox" name="color" value="red">붉은색
    </label>  
    <label for="color_blue">
        <input id="color_blue" type="checkbox" name="color" value="blue">파란색
    </label> 
  </p>   
    <input type="submit">
        </form>

text:

password:

textarea :

붉은색 파란색

0개의 댓글