백엔드 프로젝트 1주차 (Learn HTML) - 3

Forms

🎯Introduction to HTML Forms

형식은 일상 생활의 한 부분으로, 실생활에서 물리적 형식을 사용할 때, 정보를 적어서 누군가에게 주어 처리하게 함. 직업, 은행 계좌와 같은 다양한 응용 프로그램을 위해 작성하거나 완성된 추천 카드를 보내야만 했던 때를 생각해보면, 각각의 사례는 모두 형식의 일종이라고 할 수 있음.

 

물리적 양식과 마찬가지로 HTML의 <form> 요소는 다른 곳으로 보낼 정보를 수집하는 역할을 함. 인터넷을 검색할 때마다 많은 형식을 접하게 되며, 우리는 심지어 이를 깨닫지 못할 수도 있음. 텍스트 필드에 입력하거나 입력을 제공하는 경우, 입력하는 필드가 <form>의 일부일 가능성이 높음.

 

이제부터 <form>의 구조와 구문, 그리고 그것을 구성하는 여러 요소들에 대해 살펴볼 것.

 

🎯How a Form Works

인터넷을 보면, 정보를 주고 받는 컴퓨터의 네트워크라고 생각할 수 있음. 컴퓨터는 어떻게 소통하는지 알기 위해 HTTP 요청이 필요함. HTTP 요청은 수신받는 컴퓨터에 들어오는 정보를 처리하는 방법을 지시함. HTTP 요청에 대한 더 많은 정보는 우리의 기사에서 찾을 수 있음.

 

<form> 요소는 정보를 모으는 데 훌륭한 역할을 하지만, 정보를 처리하기 위해 해당 정보를 다른 곳으로 보내야 함. <form> 요소에게 <form>의 정보가 어디로 가는지와 어떤 HTTP 요청을 할지에 대한 정보를 제공해야 함. 

<form action="/example.html" method="POST">
</form>

• 위 예시 코드에서 <form> 태그의 뼈대를 만들었으며, 이 <form> 태그에서는 example.html에 POST 요청 방식으로 정보를 보내게 됨.
  • action 속성에 따라 정보가 전송되는 위치 결정
  • method 속성에는 HTTP 요청에 포함된 HTTP 동사가 할당

HTTP 동사에서 POST와 같이 반드시 대문자로 작성할 필요는 없지만, 관습때문에 이런 식으로 작성하곤 함. 

위 예시에서 method="post"라고 작성했어도 코드는 정상적으로 실행됨.

 

<form> 요소는 자식 요소를 포함할 수 있음. 예를 들어, 해당 <form>이 무엇에 대한 것인지 사용자들이 파악하기 쉽도록 제목(header)을 제공할 수 있음. 또는 더 많은 세부 사항을 제공하기 위해 단락을 추가할 수 있음.

<form action="/example.html" method="POST">
  <h1>Creating a form</h1>
  <p>Looks like you want to learn how to create an HTML form. Well, the best way to learn is to play around with it.</p>
</form>

 

🔎<form> 안의 <h1>과 <p>의 관계는 어떻게 되는가

▶️ <h1>과 <p> 요소는 서로 형제 관계이며, <form> 요소의 자식이라고 할 수 있음. 

 

 

🎯Text Input

<form>에 입력 필드를 만들기 위해, <input> 요소의 도움이 필요함.

<input> 요소는 type 속성이 있으며, 이 속성은 웹페이지에서 어떻게 렌더링 되는지, 어떤 종류의 데이터를 수용할 수 있는지를 결정함.

 

type 속성의 첫 번째 value는 "text"임. type="text"를 지닌 <input> 요소를 만들 때, 이는 사용자가 입력할 수 있는 텍스트 필드를 렌더링함. type의 기본값은 "text"임.

또한 <input>에 name 속성을 포함시킬 수 있음. name 속성이 없으면, <input> 안의 정보는 <form> 코드를 제출했을 때 전해지지 않을 것임. 

<form action="/example.html" method="POST">
  <input type="text" name="first-text-field">
</form>

• 크롬 브라우저의 웹페이지에서 렌더링한 결과, 다음과 같음. 처음 로드를 했을 때 빈 상자로 나타남.

사용자들이 <input> 요소 안에 입력을 하면, value 속성의 value는 텍스트 필드에 입력된 값이 됨. value 속성의 value는 name 속성의 value와 짝지어지며, form이 제출되었을 때 텍스트처럼 보내짐. 예를 들어, 사용자가 <input> 요소로 만들어진 텍스트 필드에 "important details"이라고 검색하면, 다음과 같이 나타남.

form이 제출되었을 떄, "first-text-field=important details"이라는 텍스트가 /example.html로 전송돔. 왜냐하면 name 속성의 value가 first-text-field이며, value의 value가 "important details"이기 때문임.

또한 아래 코드와 같이 value 속성에 기본값을 할당할 수 있는데, 이로 인해 사용자들은 렌더링된 형식을 처음 볼 때 아래 사진 같이 미리 채워진 텍스트 필드와 마주하게 됨.

<form action="/example.html" method="POST">
  <input type="text" name="first-text-field" value="already pre-filled">
</form>

 

🔎<input> 요소는 왜 클로징 태그를 가지고 있지 않은가

▶️ <input>은 void 요소라고 하는 몇 안 되는 요소 중 하나로, <p></p>와 다른 모든 내용물들의 분할 태그가 하는 것처럼 내용물을 동봉하지 않기 때문에 이러한 이름이 붙여짐. 자체 닫힘 태그는 속성에 자신의 데이터를 보유하는데, 이것이 해당 요소 개체의 소유물임. value 속성은 모든 사용자 입력을 가져오고, Submit에서는 해당 내용물의 name 속성에 지정된 이름으로 패키지화함.

 

🔎id 속성과 name 속성의 차이는 무엇인가

▶️ POST DATA의 관점에서 name 속성은 제출된 값의 고유 식별자임. id는 DOM 요소의 고유 식별자로, id 선택기는 name 선택기보다 더 높은 특수성을 지님. 웹페이지에는 주어진 id에 의해 하나의 요소만 있을 수 있지만, 자신만의 Submit을 가진 Form은 여러 개가 있을 수 있고 name 속성 또한 같을 수 있음.

 

 

 

🎯Text Input

앞서 <input>요소를 만들어 보았는데, <input>이 어떻게 사용되는지를 보기 위해 실제로는 아무것도 포함하지 않았음. 

사용자가 <input>을 잘 식별할 수 있도록 우리는 대략적으로 이름이 <label>인 요소를 사용함.

 

<label>요소는 오프닝과 클로징 태그를 가지며, 그 사이에 배치된 텍스트를 가짐. <label>과 <input>을 연관지어주기 위해, <input>은 id 속성을 필요로 함. 또한 이 <input> 요소의 id 속성 value로 <label> 요소에 for 속성을 할당할 수 있음.

<form action="/example.html" method="POST">
  <label for="meal">What do you want to eat?</label>
  <br>
  <input type="text" name="food" id="meal">
</form>

• 출력 결과는 다음과 같음:

• 이제 사용자들은 <input>요소가 무엇을 위한 것인지 알 수 있게 되었음

<label> 요소를 사용하는 또 다른 장점은 해당 요소를 클릭했을 때, 대응하는 <input>가 표시되거나 선택된다는 것임.

 

 

 

🎯Password Input

<form>에 비밀번호나 PIN과 같은 민감한 개인정보를 넣는 상황을 생각해보면, 누가 어깨 너머로 개인정보를 지켜보는 상황은 아무도 원치 않을 것임. 다행히, <input>의 type="password" 속성을 이용하여 이러한 상황을 방지할 수 있음.

<input type="password"> 요소를 이용하여 input text를 별표(*) 또는 점(●)으로 대체할 수 있음.

아래 예시 코드에서 비밀번호 필드를 어떻게 생성하는지 보여줌.

<form>
  <label for="user-password">Password: </label>
  <input type="password" id="user-password" name="user-password">
</form>

• 사용자가 필드에 입력을 하면, 아래와 같이 보이게 됨.

• 비록 필드에 비밀번호 텍스트가 가려져 있어도, 해당 양식이 제출되면 텍스트 value 자체가 전송됨.
• 비밀번호 필드에 "user-password=hunter2"를 입력하면 양식의 다른 정보와 함께 "user-password" 전송

 

 

 

🎯Number Input

지금까지 텍스트와 관련된 두 가지 <input> 요소의 속성들을 살펴보았음. 하지만 때로는 사용자들이 숫자를 입력하기를 원하는 때도 있음. 이 경우에 우리는 type 속성을 number로 설정하면 됨.

 

type="number"를 input의 속성으로 설정함으로써, 사용자들이 필드에 숫자 형태만 입력할 수 있도록 제한할 수 있음(추가로 -, +, .과 같은 기호들도 가능). 또한 step 속성으로 input 필드 안에 화살표를 생성할 수 있는데, 이는 step 속성의 value에 따라 늘어나거나 줄어들 수 있음.

 

아래 예시 코드는 렌더링했을 때 숫자 input 필드가 생성됨.

<form>
  <label for="years"> Years of experience: </label>
  <input id="years" name="years" type="number" step="1">
</form>

• 코드 실행 결과는 다음과 같음:

 

 

🎯Range Input

<input type="number>를 사용함으로써, 사용자들이 원하는 숫자를 고를 수 있도록 하는 것은 좋은 방법임.

하지만 만약 사용자들의 입력값을 제한하고 싶다면, type속성의 다른 value를 사용하는 방법을 고려해야 함.

또 다른 방법은, type을 :range로 설정하여 슬라이더를 생성하는 것임.

 

슬라이더의 최솟값과 최댓값을 생성하려면, <input>의 min 속성과 max 속성에 value를 할당해야 함.

또한 step 속성의 value를 통해 슬라이드의 움직이는 간격을 조절할 수 있음. 예를 들어 step value값이 작을수록 슬라이더가 더욱 좁은 간격으로 움직이도록 할 수 있는 반면, step value값이 클수록 슬라이더가 더 눈에 띄게 움직이게 됨.

<form>
  <label for="volume"> Volume Control</label>
  <input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>

• 위 예시 코드를 통해 슬라이더 생성 가능
• 코드를 실행한 결과는 다음과 같음:

• 위 예시 코드에서는 슬라이더가 1만큼 움직일 때마다 <input>의 속성값이 바뀜.

 

 

 

🎯Checkbox Input

지금까지는 단일 선택에 대해 살펴보았으나, 사용자에게 다중 선택의 기회를 제공하고 선택 개수를 자유롭게 했을 때의 상황도 생각해보아야 함. 이러한 경우, 체크박스를 사용하면 편리함.

<form>의 <input> 요소에서 type속성을 "checkbox"로 설정하면 됨.

<form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

• 위 코드를 실행하면 다음과 같이 나옴:

• 체크 박스의 value 속성에 할당된 value값이 존재. 이 value값들은 양식에서 그 자체로 시각적으로 나타나지는 않는, 이것이 <label>을 사용하여 체크박스를 시각화하는 것이 중요한 이유라고 할 수 있음.
• 각각의 <input>들은 name 속성에 동일한 value를 가지는데, 각 체크박스에서 동일한 name을 사용하면 <input>들을 그룹화할 수 있음. 다만 각각의 <input>들은 <label>과 짝을 이루는 고유한 id를 지님.

 

 

🎯Radio Button Input

사용자가 다중 선택을 해야할 때 체크박스를 사용하면 유용함. 그러나 여러 개의 옵션들 중 단 하나만 선택해야 하는 경우도 존재(동의, 비동의 여부를 묻는 등). 이러한 경우, radio 버튼을 사용하면 편리함.

<form>
  <p>What is sum of 1 + 1?</p>
  <input type="radio" id="two" name="answer" value="2">
  <label for="two">2</label>
  <br>
  <input type="radio" id="eleven" name="answer" value="11">
  <label for="eleven">11</label>
</form>

• 위 예시 코드를 실행한 결과는 다음과 같음:

• 체크박스와 유사하게 생긴 라디오 버튼은 value를 직접 나타내지 않으며, 연관된 <label>를 사용하여 이를 나타냄.
• 라디오 버튼들을 그룹화하기 위해 동일한 name을 할당하며, 그 중 단 하나의 버튼만이 선택될 수 있음.

 

 

🎯Dropdown list

라디오 버튼는 몇 개의 옵션들 중 하나를 고르도록 하는 데 유용한 역할을 하지만, 모든 옵션이 들어있는 리스트가 있다고 하면 다른 방법을 사용해야 함. 라디오 버튼을 사용한다면 그 수가 매우 많아져 불편할 수 있음.

 

라디오 버튼 대신, 드롭다운 리스트로 사용자들이 여러 옵션의 리스트 중 하나를 택할 수 있도록 만들 수 있음.

<form>
  <label for="lunch">What's for lunch?</label>
  <select id="lunch" name="lunch">
    <option value="pizza">Pizza</option>
    <option value="curry">Curry</option>
    <option value="salad">Salad</option>
    <option value="ramen">Ramen</option>
    <option value="tacos">Tacos</option>
  </select>
</form>

• 위 코드를 실행하면 다음과 같이 나옴:

• 첫 번째 옵션이 나타나있는 필드를 클릭하면 리스트가 드러남:

• 위 예시 코드에서는 <select> 요소를 사용하여 드롭다운 리스트를 생성함. 드롭다운의 목록을 채우기 위해, value 속성을 지닌 여러 개의 <option> 요소를 추가함. 기본값으로 목록 중 한 항목만 선택 가능함.
• 오프닝과 클로징 <option>태그 사이의 텍스트가 렌더링되지만, <form> 제출 때 사용되는 것은 value 속성의 값임(텍스트와 value 속성 사이의 대문자 사용에 주의).
• <form>이 제출되었을 때, input 필드의 정보는 <select>의 name 속성과 <option>에서 택해진 value값이 사용됨. 예를 들어, 사용자가 드롭다운 목록에서 Pizza를 선택했다면, "launch=pizza"라는 정보가 전달되는 것.

 

 

🎯Datalist Input

조직화된 드롭다운 리스트에서는 수많은 옵션들이 있다면, 사용자들은 스크롤을 내리는 데 불편함을 느낄 수 있음. 이런 상황에서는 <datalist>요소를 사용하면 편리함.

<datalist>는 <input type="text"> 요소로 사용하며, <input>은 텍스트 필드를 생성하고 사용자들은 텍스트를 입력하여 <datalist> 옵션들을 필터링 할 수 있음.

<form>
  <label for="city">Ideal city to visit?</label>
  <input type="text" list="cities" id="city" name="city">

  <datalist id="cities">
    <option value="New York City"></option>
    <option value="Tokyo"></option>
    <option value="Barcelona"></option>
    <option value="Mexico City"></option>
    <option value="Melbourne"></option>
    <option value="Other"></option>  
  </datalist>
</form>

• 위 코드에서 list 속성을 지닌 <input>이 존재. <input>은 이 list 속성을 통해 <datalist>의 id 속성과 연결될 수 있음.
• 위 코드를 실행하면 다음과 같이 나옴:

• 필드가 선택되면 다음과 같이 나타남:

<select>와 <datalist>은 유사한 부분도 있지만, 큰 차이점도 존재함.

연결된 <input> 요소에서 사용자는 입력 필드에 입력을 함으로써 특정 옵션을 검색할 수 있음. <option>이 일치하지 않는 경우에도 사용자는 입력한 것을 사용할 수 있음.

양식이 제출되면 <input>의 이름과 선택한 옵션의 값 또는 사용자가 입력한 값이 전송됨.

 

 

 

🎯Textarea element

<input> 요소의 type="text" 속성은 사용자들이 정보를 입력할 수 있는 단일 row input field 생성함. 그러나, 사용자들이 더 많은 정보를 입력해야 하는 때도 있는데, 이런 경우에는 <input> 대신 <textarea>를 사용함.

<textarea> 요소는 사용자가 보다 많은 텍스트를 입력할 수 있도록 더 큰 text field를 생성하기 위해 사용됨.

<textarea>의 row와 column의 양을 파악하기 위해 rows와 cols 속성을 추가할 수 있음.

<form>
  <label for="blog">New Blog Post: </label>
  <br>
  <textarea id="blog" name="blog" rows="5" cols="30">
  </textarea>
</form>

• 위 예시 코드에서, 텅 빈 5 rows by 30 columns textarea가 생성됨.
• 코드를 실행하면 다음과 같은 화면이 나옴:

더 큰 text field가 필요하다면, 오른쪽 아래를 클릭하고 드래그하여 영역을 확장할 수 있음.

양식을 제출하면 <textarea>의 value는 박스 안에 입력된 텍스트가 됨.

<textarea>에 기본값을 추가해주고 싶다면 다음과 같이 오프닝 클로징 태그 사이에 포함시면 됨.

<textarea>Adding default text</textarea>

• 위 코드를 실행하면 "Adding default text"라고 미리 채워진 텍스트 박스가 생성됨.

 

 

🎯Submit Form

form의 목적은 제출될 정보들을 수집하는 것. 이는 제출 버튼의 역할이며, 사용자가 <form>에 정보 입력을 완료하면 전송할 준비가 완료된 것임. 지금까지는 다양한 형태의 정보를 수집하는 방법에 대해 알아보았다면, 이제는 이를 제출하는 버튼을 생성하는 과정을 볼 것.

 

<form>에 제출 버튼을 만들기 위해 우리는 <input> 요소를 생성하고 type속성 value를 "submit"으로 지정함.

<form>
  <input type="submit" value="Send">
</form>

• 예를 들어 위 코드를 실행하면 다음과 같이 나옴:

• <input>에 할당된 value은 Send라는 텍스트를 보여줌. value 속성이 없다면 기본값으로 Submit이 나타남.

 

 

 

🎯Review

🌐<form>의 목적은 사용자들이 정보를 입력하고 전송하는 것임.

• form의 action 속성은 form의 정보가 어디로 가는지 지정
• form의 method 속성은 정보가 어떻게 전송 및 처리되는지 지정

🌐사용자들이 정보를 입력하는 필드를 생성하기 위해 <input>요소를 사용하고 어떤 정보를 입력하냐에 따라 type 속성을 이용하여(value값을 다르게 함) 필드 형태를 다르게 바꿀 수 있음.

• type을 "text"로 지정하면 텍스트 입력을 위한 단일 row 필드 생성.
• type을 "password"로 지정하면 입력값을 가려주는 단일 row 필드 생성.
• type을 "number"로 지정하면 숫자 입력을 위한 단일 row 필드 생성.
• type을 "range"로 지정하면 특정 범위 내에서 고를 수 있는 슬라이더 생성.
• type을 "checkbox"로 지정하면 다른 체크박스들과 그룹화된 단일 체크박스 생성.
• type을 "radio"로 지정하면 다른 라디오 버튼들과 그룹화된 단일 라디오버튼 생성.
• type을 "text"로 지정하고 list 속성을 추가했을 때, <input>의 <list> 속성 value와 <datalist>의 <id> 속성 value가 같으면 <input>과 <datalist> 요소가 서로 연결됨.
• type을 "submit"으로 지정하면 제출 버튼 생성.

🌐<select> 요소는 <option> 요소로 채워지고 드롭다운 리스트를 생성.

🌐<datalist> 요소는 <option> 요소로 채워지고 옵션 검색을 하기 위해 <input>과 연동됨.

🌐<textarea> 요소는 크기 조정이 가능한 텍스트 입력 필드를 생성.

🌐<form>을 제출하면 입력값을 수용하는 필드의 name과 value 속성값들이 name=value로 쌍이 되어 전송됨.