테이블에서 시작

표는 사용자와 사이트나 응용 프로그램이 상호작용하는 가장 흔한 방식 중의 하나다.간단한 시사통신 구독부터 복잡한 다행 배송표까지 웹의 모든 사이트와 응용 프로그램에 거의 등장한다.본고에서 우리는 기본적인 표를 구축하여 자주 사용하는 개념과 요소를 소개할 것이다.

HTML 양식이란?
양식은 웹 페이지의 한 구성 요소로 사용자가 상호 작용하여 데이터를 제공한 다음 이를 서버에 제출하여 처리할 수 있다(예를 들어 시사통신 구독을 위한 이메일 주소 제출), 또는 일부 상황에서 클라이언트(예를 들어 UI 업데이트로 요소를 추가하거나 삭제할 수 있다)를 말한다.
폼에는 단추, 텍스트 입력, 범위 컨트롤, 복선 상자 등 다양한 사용자가 상호작용할 수 있는 컨트롤 요소가 있습니다.우리는 곧 이 원소들에 대해 더욱 깊이 있는 연구를 진행할 것이다.

양식을 작성하려면
양식 작성은 일반적으로 몇 단계로 나눌 수 있습니다.

디자인 폼

사용자 인터페이스 만들기

폼 데이터를 처리하기 위해 서버측 또는 클라이언트 코드를 생성

양식을 서버와 통신하도록 구성합니다.

폼 디자인과 서버 측의 폼 처리는 본고의 범위를 넘어서 깊이 주목할 만하다.폼 디자인에 관한 더 많은 글을 읽는 데 관심이 있다면 다음과 같은 글을 읽으십시오.
테이블 디자인:

UXMatters는 폼like this article on best practices에 훌륭한 자원이 몇 개 있다.

UX Planet은 사용자 체험에 관한 블로그로 basics of efficient forms에 좋은 글이 있습니다.

서버측 양식 처리:

MDN에 processing HTML form data using Node.js and Express에 대한 좋은 글이 있습니다.

정의 데이터
본문에서 우리는 햄버거를 주문하는 표를 만들 것이다.이 폼에서 수집해야 할 데이터를 신속하게 정의합니다.

사용자 정보

고객 이름

전화 번호

이메일 주소

햄버거

쇠고기

채식자

고명

치즈

케첩

겨자

채소절임

양파

양파

배송 지침

교부된 그 어떠한 특수 의견(예를 들어 옆문으로 들어가는 것)

이제 우리는 폼이 어떤 데이터를 수집해야 하는지에 대해 더 잘 알고 폼을 구축하기 시작했다.

양식 요소
어떤 폼을 만들 때 우리가 해야 할 첫 번째 일은 <form> 요소를 사용하는 것이다.모든 폼 컨트롤이 그 안에 놓여 있습니다.

<form
  action="https://tasty.hamburgers.example..com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
></form>

양식 요소는 양식을 정의하는 컨테이너 요소입니다.이 속성들은 선택할 수 있지만 웹 폼에서 흔히 볼 수 있습니다.

action - 양식 작업이 처리될 양식 데이터를 정의하는 URL을 사용합니다.이 경우 사용자가 이 폼을 제출할 때 데이터는 서버에서 처리하기 위해 https://tasty.hamburgers.example.com/order에 전송됩니다.

method - 폼은 여러 가지 방식으로 서버와 상호작용을 하는데 가장 흔히 볼 수 있는 것은 HTTP GET와 POST 방법이다.이 속성은 창을 사용하는 방법을 정의합니다.

enctype - 양식 데이터를 제출할 때 사용할 내용 유형을 정의합니다.

이제 우리는 폼 컨트롤을 추가할 수 있습니다.

양식 컨트롤
양식 컨트롤은 양식 요소에 포함됩니다.우선 사용자 이름을 수집할 입력을 추가합니다.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
</form>

<p> 요소에 첫 번째 폼 컨트롤, 탭, 사용자 이름을 수집하는 입력을 추가했습니다.입력은 가장 흔히 볼 수 있는 폼 컨트롤 형식입니다.탭과 입력이 <p> 요소에 포함되어 있음을 알 수 있습니다.목록 요소(예를 들어 <ul>와 <li>를 사용하여 폼을 구성하는 것은 흔하지만 본고에서 폼 컨트롤은 <p> 요소에 포함될 것이다.

<label> -label 요소는 폼 컨트롤의 제목을 나타낸다. 이 예에서 <input>.이 예에서 폼 컨트롤<input은 label 요소 내부에 직접 위치하지만 이렇게 분리된 것을 자주 볼 수 있습니다.

<p>
  <label for="name">Name: </label>
  <input name="custname" type="text" id="name" required />
</p>

컨트롤이 탭 안에 직접 있지 않을 때, 컨트롤에 속성과 대응하는 것을 사용해야 합니다.사용자가 탭을 누르거나 활성화할 때, 탭 컨트롤이 활성화됩니다. 사용자가 탭을 누르는 것처럼.

<input> - 사용자의 데이터를 수락하도록 입력합니다.그것은 대량의 데이터 형식과 속성을 받아들일 뿐만 아니라, 무수한 조합으로 인해 상당히 복잡한 HTML 요소이다.다음은 현재 예제에서 사용되는 속성입니다.

name - 제출된 모든 폼 컨트롤에 대해 데이터 이름을 지정해야 합니다.사용자가 양식을 서버에 제출하면 서버는 이 예제에서 HTTP POST 본문의 매개 변수로 데이터를 받기를 원합니다.우리의 예시에서'custname'은 서버가 원하는 파라미터를 나타낸다.

type-type 속성은 입력 요소의 데이터 형식을 정의하고 제어합니다.우리의 예시에서, 우리는 키워드 “text” 를 사용했는데, 데이터 형식은 '텍스트 줄 바꾸기 없음' 이다.

required - 단순client-side validation에서 사용하는 구속 속성입니다.Required를 사용할 때, 사용자는 폼을 제출하려고 시도할 때 알림을 받지만, 해당하는 입력 필드를 기입하지 않습니다.

전화 및 이메일 필드를 추가하여 고객 정보 제어를 완료합니다.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
</form>

양식 컨트롤 그룹화
목록에 햄버거 종류를 선택하는 기능을 추가합니다.햄버거 패티는 두 가지가 있는데, 하나는 소고기이고, 다른 하나는 채소다.사용자가 옵션을 선택하는 가장 직관적인 방법은 radio buttons입니다.라디오 버튼도 입력 요소를 사용하며 일반적으로 함께 조합됩니다.
라디오 버튼을 선택하려면 입력 속성type을 라디오로 설정해야 합니다.라디오 단추를 그룹으로 만들려면 공통name 속성을 공유해야 합니다. 이 예에서 이 속성의 값은 "patty"입니다.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
</form>

<fieldset> - 양식 컨트롤 세트를 결합할 때 이 요소를 사용합니다.이것은 보통 <legend> 요소에서 제공하는 제목을 포함한다.

이제 사용자가 햄버거 조미료를 선택하는 기능을 계속 추가합시다.이를 위해 우리는 입력 유형“checkbox”을 사용할 것이다. 왜냐하면 사람들은 보통 햄버거에 조미료가 한 가지가 아닌 것을 원하기 때문이다.이 컨트롤에 공유 이름 속성을 다시 한 번 제공하여 <fieldset> 요소에 포함시킬 것입니다.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
</form>

텍스트 영역 추가
교부 표의 흔한 부분은 특수 설명 텍스트 영역이다.이 입력을 사용하면 사용자가 교부에 소량의 설명을 추가할 수 있습니다.이 표에 <textarea> 요소를 계속 사용해서 추가합시다.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
  <p>
    <label
      >Special instructions:
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>
</form>

텍스트 영역에 maxlength 속성을 추가했습니다.이렇게 하는 것은 매우 긴 특수 명령을 방지하기 위해서이며 이것은 제약 속성과 클라이언트 검증의 또 다른 예이다.

커밋 단추 추가
우리는 현재 고객의 햄버거 주문 데이터를 수집하는 데 필요한 모든 표시를 가지고 있다.그러나 그들은 주문서를 제출하는 방식이 필요하다.활성화할 때 서버에 데이터를 보내는submit 단추를 계속 추가합니다.

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label>Name: <input name="custname" type="text" required /></label>
  </p>
  <p>
    <label>Telephone: <input type="tel" name="custtel" required /></label>
  </p>
  <p>
    <label
      >Email address: <input type="email" name="custemail" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
  <p>
    <label
      >Special instructions:
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>
  <p><button type="submit">Submit</button></p>
</form>

단추의 기본 동작은submit이지만, 명확하게 보기 위해 표시에 추가되었습니다.

자동 완성 기능 추가
일부 브라우저들은 이전에 저장된 정보(예를 들어 이름과 주소)를 사용하여 일부 필드를 자동으로 완성함으로써 사용자가 폼을 작성하는 것을 돕고자 한다.우리는 사용자가 표를 작성하는 데 편리하도록 일부 입력에 autocomplete 속성을 추가할 수 있다.
autocomplete 속성을 다음 입력에 추가합니다.

고객 이름

전화 번호

이메일 주소

<form
  action="https://tasty.hamburgers.example.com/order"
  enctype="application/x-www-form-urlencoded"
  method="POST"
>
  <p>
    <label
      >Name: <input name="custname" type="text" autocomplete="name" required
    /></label>
  </p>
  <p>
    <label
      >Telephone: <input type="tel" name="custtel" autocomplete="tel" required
    /></label>
  </p>
  <p>
    <label
      >Email address:
      <input type="email" name="custemail" autocomplete="email" required
    /></label>
  </p>
  <fieldset>
    <legend>Hamburger patty</legend>
    <p>
      <label> <input type="radio" name="patty" /> Beef </label>
    </p>
    <p>
      <label> <input type="radio" name="patty" /> Veggie </label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Toppings</legend>
    <p>
      <label> <input type="checkbox" name="topping" /> Cheese </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Ketchup </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Mustard </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Pickle </label>
    </p>
    <p>
      <label> <input type="checkbox" name="topping" /> Onion </label>
    </p>
  </fieldset>
  <p>
    <label
      >Special instructions:
      <textarea name="comments" maxlength="500"></textarea>
    </label>
  </p>
  <p><button type="submit">Submit</button></p>
</form>

마무리
HTML 양식의 기본 태그, 양식 컨트롤을 소개하고 클라이언트 유효성 검사와 자동 완성 등의 기능을 소개합니다.이것은 HTML 폼의 표면에만 닿지만, 현재 그것들의 구조와 기능에 대해 더 잘 이해하기를 바랍니다.앞으로의 글에서 저는 이 예시를 계속 사용하여 이 폼의 스타일을 디자인하고 자바스크립트를 사용하여 클라이언트 검증을 바탕으로 구축할 것입니다.
이 양식의 소스 코드는 다음과 같습니다.
Completed hamburger form

추가 자원

HTML Forms - WHATWG

HTML Form Elements - MDN

Client-side Validation - MDN

The input element - MDN