프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

<label> 과 <input> 본문

HTML

<label> 과 <input>

자라나라나무나무나 2022. 6. 1. 00:31

input태그 안의 name은 하나의 form data 안에서 구분을 하는 이름이고 id는 label태그의 for과 연결짓기 위한 이름

 - name과 id가 같을 필요는 없다.

- id는 한 문서 내에서 겹치면 안된다.

- name은 form태그 안에서만 겹치지 않으면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="printpage.css" />
</head>
<body>
    <h2>Form</h2>

    <form action="https://binggle-binggle.tistory.com/" method="GET">
        <label for="foodNameBox">음식 이름 :</label>
        <input type="text" name="foodName" id="foodNameBox">
        <button type="submit">제출</button>
    </form>

</body>

</html>

get 방식을 이용하여 url에 name인 foodName이 들어가게 되었다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="printpage.css" />
</head>
<body>
    <h2>Form</h2>

    <form action="https://binggle-binggle.tistory.com/" method="GET">
        <div>
            <label for="foodNameBox">음식 이름 :</label>
            <input type="text" name="foodName" id="foodNameBox">
        </div>
        <div>
            <label>색깔 :
                <input type="text" name="color">
            </label>
        </div>
        <button type="submit">제출</button>
    </form>

</body>

</html>

첫번째 div → 형제요소

: for과 label이 필수이다. 

 

두번째 div →  자식요소

: for 요소를 적지 않아도 된다. 그렇기 때문에 id도 없어도 된다.

 

☞ 두개 다 똑같이 작동한다.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

<input> - minlength, maxlength  (0) 2022.06.01
<fieldset>, <legend>  (0) 2022.06.01
<form> - action, method  (0) 2022.06.01
video  (0) 2022.05.29
반응형 이미지 - sizes  (0) 2022.05.27
'HTML' Related Articles more
Comments