웹사이트를 제작하다 보면 반드시 Form 요소를 사용하게 되는 순간이 온다. 그도 당연할 것이 사용자의 정보를 입력 받거나, 검색이 가능하게 하는 등의 사용자와의 인터렉션 공간이 바로 Form 요소 안의 내용들이기 때문이다.
Form에 대해서는 다룰 주제가 너무나도 많지만, 우선 이번 포스팅에서는 Form 요소와 Button 요소의 관계에 대해 알아보고자 한다.
다음 아래와 같은 HTML 문서가 있다고 하자.
<!DOCTYPE html>
<html lang="ko">
<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>Form과 Button</title>
</head>
<body>
<div class="container">
<form action="">
<p>여러분들의 생각을 적어주세요~</p>
<input type="text" required />
<button type="submit" class="btnOne">제출1</button>
</form>
<button type="submit" class="btnTwo">제출2</button>
</div>
</body>
</html>자! 이제 웹 브라우저 상에 위의 코드를 렌더링하면 아래와 같이 브라우저에 나타난다.
이제 form 안에 있는 input 요소에 아무런 값도 넣어주지 않고 "제출1" 버튼을 눌러보자!
그 결과 다음과 같이 input 요소 안을 채우라는 안내 문구가 나타났다.
안내 문구가 나타난 것은 당연한 것이다. 왜냐하면 input 요소 안에 "required" 속성을 지정했기 때문이다.
즉 제출1 버튼을 누르면 버튼의 용도인 "submit"을 input 요소와 함께 아주 잘 수행하고 있다고 볼 수 있다.
이제 동일한 조건 하에서 form 요소 밖에 있는 "제출2" 버튼을 눌러보자!
그 결과 버튼이 클릭은 되지만(당연한 이야기지만...) input 요소에서 "이 입력란을 작성하세요"라는 안내문구가 나타나지는 않는다.
결국 제출 2 버튼은 input 요소와 그 어떠한 연관성이 없다는 것이 밝혀진 것이다!
따라서 form 요소에 입력된 정보와 인터렉션 하기 위한 용도(또는 submit하기 위한 용도)로 button 요소를 사용한다면 반드시 input 요소와 같이 연동이 되도록 form 요소 내부에 관련 button 요소를 넣어 주어야 한다.
'Study > HTML' 카테고리의 다른 글
| [HTML] 물건을 잃지 않으려면 라벨을 잘! 붙이세요~~ (0) | 2022.10.01 |
|---|---|
| [HTML] Semantic HTML ... 두 번째 이야기 (0) | 2022.09.20 |
| [HTML] Semantic HTML이 중요한 이유! (0) | 2022.09.01 |
| [HTML] emmet 작성법 (0) | 2022.08.31 |
| [HTML] Content model (0) | 2022.03.11 |