[HTML/CSS] form 요소 1— 사용자 입력 양식 기본
이번 포스트에서는 HTML 로 사용자의 입력을 받을 수 있는 form 요소에 대해서 다뤄보려고 한다. 이번 포스트에서는 사용자의 입력을 받을 수 있는 일반적이고 기본적인 것에 대해서만 다룰 예정이다.
<Form> 요소
HTML form 은 사용자의 입력을 받기 위해 사용된다. 사용자가 입력한 데이터는 주로 서버로 보내는데 사용하지만, 다른 용도로도 물론 사용할 수 있다.
<Form> 요소의 하위 요소
Form 요소는 다음 요소들을 하위 요소로 가질 수 있다.
<input>
, <textarea>
, <button>
, <select>
, <option>
, <optgroup>
, <fieldset>
, <label>
, <output>
그러나 이번 포스트에서는 <input>
, <label>
, <button>
세 가지 요소를 사용해서 사용자의 입력을 받아보고, 서버로 보내는 것까지 해보려고 한다.
기본 css 설정
<!-- form 태그 css 기본 세팅 -->
form {
display: block;
margin-top: 0em;
}
<Form> 요소의 속성
사용자의 입력 받기
사용자의 입력을 받는 기본적인 형태에 필요한 것들은 다음과 같은 것들을 생각해볼 수 있다.
- 사용자의 입력을 받는 요소가 있다. =>
<input>
요소 - 사용자가 입력해야하는 값이 어떤 것인지 명시한다. =>
<label>
요소 - 사용자가 입력을 완료하고 제출할 수 있는 상호작용 요소가 필요하다. =>
<button>
요소 (<input>
요소의 submit 타입으로도 가능) - 사용자가 입력을 완료하고 제출했을 때, 데이터를 전송받을 곳이 필요하다. =>
<form>
요소의 action 속성
이번 포스트에서는 기본적인 형태에 필요한 <input>
, <label>
, <button>
요소에 대해 알아보고 실습해볼 예정이다.
<form> 요소의 action 속성 설정
<input>
, <label>
, <button>
요소에 대해 알아보기 전에, 사용자가 입력을 완료하고 제출했을 때 데이터를 전송받을 곳부터 설정해보자. 이 내용은 바깥 쪽인 <form>
요소의 action 속성에서 설정하기 때문이다.
그렇다면 사용자가 입력한 데이터를 어디로 전송해야할까? 우리는 그런 서버를 만드는 것이 목적이 아니기 때문에, w3school 에서 만든 action url 을 이용하려고 한다. 브라우저에서 새 탭을 열어 “https://www.w3schools.com/action_page.php” 를 입력하거나 하이퍼링크를 이용하여 페이지를 이동해보자.
이동하면 Fig2 와 같은 페이지를 볼 수 있다. 비어있는 칸은 입력받은 값들을 보여준다. 아무 값도 입력하지 않기 때문에 비어있는 칸을 볼 수 있다.
<form action="https://www.w3schools.com/action_page.php">
<!-- 앞으로 채워나갈 사용자 입력을 받는 코드 -->
</form>
위와 같이 <form>
요소의 action 속성을 설정해주고, 다음 단계들을 진행해보자.
<input> — 사용자의 입력을 받는 요소
<input>
요소를 이용하면 사용자의 입력을 받을 수 있다. <input>
요소는 type
속성을 이용하여 어떤 형태의 입력을 받을지 정할 수 있다. <input>
요소는 닫는 태그가 없다. type
의 기본값은 text
이다. 서버에 전송되어 보여질 속성의 이름은 name
속성으로 정한다.
위 예제를 실행시켜보면 텍스트를 입력할 수 있는 칸이 생겼지만 무엇을 입력해야 하는지 알 수 없고, 해당 데이터를 어떻게 이용할 것인지 상호작용하는 버튼도 없다. 먼저 <label>
요소를 통해 무엇을 입력하는지 명시하도록 해보자.
<label> — 사용자가 어떤 내용을 입력해야 하는 지 명시하는 요소
<label>
요소를 사용하면 사용자가 어떤 내용을 입력해야하는지 명시할 수 있다. for 속성은 <input>
요소의 id를 명시하여, 서버로 전송될 때<label>
요소가 어떤 <input>
요소의 값을 전송할 건지 정한다.
<button> — 사용자가 입력한 내용을 제출할 수 있는 상호작용을 제공하는 요소
<button>
요소를 사용하면 사용자가 입력한 내용을 <form>
요소의 action
속성으로 설정된 url로 전송할 수 있다. type
속성은 submit
으로 설정한다. 이렇게 되면 사용자가 <input>
요소에 입력 후에 <button>
요소를 클릭하면 서버로 데이터가 전송된다.
<input> 요소의 type 속성
이번에는 <input>
요소에 대해 좀 더 자세히 알아보려고 한다. 위에서 간단하게 보았지만, <input>
요소는 사용자의 입력을 받는 요소이다. <input>
요소는 type 속성의 값에 따라 입력 형태가 달라지고, 기본 값은 text
이다. HTML5 에서는 다양한 형태의 type 을 사용할 수 있는데, 아래 Fig5–1~Fig5–3 은 type 속성에 따른 유형의 기본적인 설명과 기본 형태의 UI 를 세 개의 이미지로 나눈 것이다.
<input>
요소 유형에 따른 더욱 상세한 내용은 아래 페이지를 참고하면 좋을 것 같다.
<button> 요소와 <input> 요소 차이
우리는 Ex3 의 예제에서 <button>
요소를 사용해 form 데이터를 제출하는 기능을 구현했다. 그러나 Fig5 에서 <input>
요소의 type 속성이 button일 때와 submit 일 때, <button>
요소가 하는 역할과 비슷해 보인다. 이 차이에 대해서 좀 더 살펴보자.
<button> 요소
먼저 <button>
요소에 대해서 알아보자. <button>
요소는 <form>
요소의 하위 요소로만 사용되는 것이 아니다. <button>
요소는 사용자가 클릭(터치)하여 상호작용할 수 있는 하나의 요소이다.
<button>
요소에도 <input>
요소처럼 type 속성이 있는데, 기본값은 submit
이지만 브라우저마다 다를 수 있으므로 항상 명시해주는 것이 좋다. <button>
요소의 type 속성의 가능한 값은 Fig6 과 같다.
type 외에 <button>
요소에 대한 다른 내용이나 더 자세한 내용은 아래 링크를 참고하자.
<button>, <input> 비교
두 요소의 차이점과 공통점은 아래와 같다.
- 먼저 <button> 은 닫는 태그가 있고, <input> 은 닫는 태그가 없다. 버튼의 텍스트를 표시하려면
<button>
요소는<button></button>
두 태그 사이에 텍스트를 입력하고,<input>
요소는value
속성에 텍스트를 값으로 주면 된다. <button>
요소는 텍스트에 관련된 태그(<i>
,<b>
,<strong>
,<br>
,<img>
, etc.)를 사용하여 표현할 수 있지만,<input>
요소는 한 줄의 텍스트만 입력할 수 있다.<button>
요소는<img>
태그로 이미지를 텍스트와 같이 표현하는 것도 가능한 것을 확인하자.<button type=“submit”></button>
과<input type=“submit”>
둘은 위의 1, 2 번의 차이점을 제외하면 기능면에서는 동일하다. (button
,reset
값도 마찬가지)
Reference
- [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
- [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
- [TCPSchool] “HTML <form> 태그" — http://www.tcpschool.com/html-tags/form