웹개발/html

[html] 폼 태그 - <form>, <fieldset>, <legend>, <label>, <input>

webvillain 2021. 5. 25. 15:28

<form> 태그 요소

<fieldset></fieldset> <form>요소들을 그룹화
<legend></legend> <fieldset>요소의 캡션 정의
<label></label> - <label>의 for속성값은 결합하고자 하는 요소의 id속성값과 같아야 한다.
- 결합하고자 하는 요소를 <label>안에 위치시키면 for 속성 사용하지 않아도 된다.

-  <label> 요소 사용할 수 있는 요소 :

   <button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>
<input> 입력 필드 정의

예시 )

 

  <form>
    <fieldset>
      <legend>로그인 정보</legend>
      <lable for="user_id">아이디</lable>
      <input type="text" name="user_id" id="user_id">
      <label for="pwd">비밀번호</label>
      <input type="password" name="pwd" id="pwd">
    </fieldset>

    <fieldset>
      <legend>연락처 정보</legend>
      <label for="mobile">
        전화번호<input type="text" name="mobile" id="mobile">
      </label>
      <label for="email">
        이메일<input type="text" name="email" id="email">
      </label>
    </fieldset>
  </form>