[HTML/CSS] form 요소 1— 사용자 입력 양식 기본

dEpayse

Published in

dEpayse_publication

9 min readDec 7, 2022

이번 포스트에서는 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 속성 설정 — w3school 의 action url

이동하면 Fig2 와 같은 페이지를 볼 수 있다. 비어있는 칸은 입력받은 값들을 보여준다. 아무 값도 입력하지 않기 때문에 비어있는 칸을 볼 수 있다.

<form action="https://www.w3schools.com/action_page.php">
  <!-- 앞으로 채워나갈 사용자 입력을 받는 코드 -->
</form>

위와 같이 <form> 요소의 action 속성을 설정해주고, 다음 단계들을 진행해보자.

<input> — 사용자의 입력을 받는 요소

<input> 요소를 이용하면 사용자의 입력을 받을 수 있다. <input> 요소는 type 속성을 이용하여 어떤 형태의 입력을 받을지 정할 수 있다. <input> 요소는 닫는 태그가 없다. type 의 기본값은 text 이다. 서버에 전송되어 보여질 속성의 이름은 name 속성으로 정한다.

Ex1. input 요소 이용하여 표현하기

위 예제를 실행시켜보면 텍스트를 입력할 수 있는 칸이 생겼지만 무엇을 입력해야 하는지 알 수 없고, 해당 데이터를 어떻게 이용할 것인지 상호작용하는 버튼도 없다. 먼저 <label> 요소를 통해 무엇을 입력하는지 명시하도록 해보자.

<label> — 사용자가 어떤 내용을 입력해야 하는 지 명시하는 요소

<label> 요소를 사용하면 사용자가 어떤 내용을 입력해야하는지 명시할 수 있다. for 속성은 <input> 요소의 id를 명시하여, 서버로 전송될 때<label> 요소가 어떤 <input> 요소의 값을 전송할 건지 정한다.

Ex2. <label> 요소 이용하여 표현하기

<button> — 사용자가 입력한 내용을 제출할 수 있는 상호작용을 제공하는 요소

<button> 요소를 사용하면 사용자가 입력한 내용을 <form> 요소의 action 속성으로 설정된 url로 전송할 수 있다. type 속성은 submit 으로 설정한다. 이렇게 되면 사용자가 <input> 요소에 입력 후에 <button> 요소를 클릭하면 서버로 데이터가 전송된다.

Ex3. <button> 요소 이용하여 데이터 전송하기

<input> 요소의 type 속성

이번에는 <input> 요소에 대해 좀 더 자세히 알아보려고 한다. 위에서 간단하게 보았지만, <input> 요소는 사용자의 입력을 받는 요소이다. <input> 요소는 type 속성의 값에 따라 입력 형태가 달라지고, 기본 값은 text 이다. HTML5 에서는 다양한 형태의 type 을 사용할 수 있는데, 아래 Fig5–1~Fig5–3 은 type 속성에 따른 유형의 기본적인 설명과 기본 형태의 UI 를 세 개의 이미지로 나눈 것이다.

<input>요소 유형에 따른 더욱 상세한 내용은 아래 페이지를 참고하면 좋을 것 같다.

&colon; 입력 요소 - HTML&colon; Hypertext Markup Language | MDN

Valid for the file input type only, the accept property defines which file types are selectable in a file upload…

developer.mozilla.org

<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> 요소에 대한 다른 내용이나 더 자세한 내용은 아래 링크를 참고하자.

HTML button tag

More "Try it Yourself" examples below. The tag defines a clickable button. Inside a element you can put text (and tags…

www.w3schools.com

<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