바이오 대표

[HTML] <form> <label></label><input/></form>_예시)계정 본문

Front_end

[HTML] <form> <label></label><input/></form>_예시)계정

바이오 대표 2021. 8. 8. 15:04

 

기본 형식 

<form>
  <label for="name"> </label>
  <input id="name"/>
</form>

 

* label for="" == input id=""

   label 의 for 과 input 의 id는 같아야 연동이 된다! 위의 예시에서는 name으로 같게 설정해주었다.

* label 은 self tag 

 

<!DOCTYPE html>  
<html lang="kr"> 
    <head>
        <title>HTML input Exercise</title>
    </head>
    <body>
        <form>
            <label for='first-name' >First Name</label>
            <input id='first-name' required placeholder="First Name" type="text"/>

            <label for='url' >Website</label>
            <input id='url' required placeholder="First Name" type="url"/>
            
            <label for='last-name' >Last Name</label>
            <input id='last-name' required placeholder="Last Name" type="text"/>
            <input required placeholder="ID" ype="text"/>
            <input required placeholder="password" minlength="10" type="password"/>
            <input type="submit"/>
        </form>
    </body>
</html>

↓

입력 칸이 아니더라도 label을 클릭하였을 때도 입력을 할 수 있다. 

 

저작자표시

'Front_end' 카테고리의 다른 글

[HTML] <div></div>, Semantic 태그들  (0) 2021.08.08
[HTML] <form> <label></label><input/></form>_예시)달력  (0) 2021.08.08
[HTML] HEAD = 웹사이트 description, meta 태그  (0) 2021.08.08
[HTML] Visual Studio Code Theme (Set up & Error 띄우기)  (0) 2021.08.08
[HTML] 기본 서식 Head & Body  (0) 2021.07.04
'Front_end' Related Articles more