사용자가 양식에 데이터를 입력하도록 지원

대화형 양식을 만들려면 양식 요소를 추가해야 합니다. 데이터를 입력하고 선택하는 컨트롤, 컨트롤을 설명하는 요소, 필드를 그룹화하는 요소와 양식을 제출하는 버튼이 있습니다.

양식 요소란 무엇인가요?

<input> 요소 <input type="text">와 <input type="file">가 표시됩니다. 왜 다르게 생겼을까요?

요소 이름과 type 속성에 따라 브라우저는 다른 사용자 인터페이스를 표시하고 검증 규칙, 다른 여러 기능도 제공합니다 적절한 양식 컨트롤을 사용하면 더 나은 양식을 만드는 데 도움이 됩니다.

양식 요소 라벨

사용자가 좋아하는 색상을 입력할 수 있는 입력을 추가한다고 가정해 보겠습니다. 이를 위해 양식에 <input> 요소를 추가해야 합니다. 그러나 사용자는 자신이 좋아하는 색으로 채워야 한다는 것을 어떻게 알 수 있을까요?

양식 컨트롤을 설명하려면 각 양식 컨트롤에 <label>를 사용합니다.

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

라벨 요소의 for 속성은 입력의 id 속성과 일치합니다.

사용자 입력 캡처

이름에서 알 수 있듯이 <input> 요소는 사용자의 입력을 수집하는 데 사용됩니다.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

앞서 언급했듯이 id 속성은 <input>를 <label>에 연결합니다. 이 예의 이름과 유형 속성은 어떨까요?

이름 속성

name 속성을 사용하여 사용자가 컨트롤로 입력하는 데이터를 식별합니다. 양식을 제출하면 이 이름이 요청에 포함됩니다. 양식 컨트롤의 이름을 mountain로 지정했고 사용자가 Gutenberg을 입력했다고 가정해 보겠습니다. 요청에 이 정보가 mountain=Gutenberg로 포함됩니다.

변경 시도 양식 컨트롤의 이름을 hill로 설정합니다. 이 작업을 올바르게 하고 양식을 제출하면 URL에 hill가 표시됩니다.

입력 유형

다양한 양식 컨트롤 유형으로, 여러 브라우저와 플랫폼에서 작동하는 유용한 내장 기능이 포함되어 있습니다. type 기준 속성을 사용하면 브라우저가 다양한 사용자 인터페이스를 렌더링하고, 다양한 터치 키보드를 표시하며, 다양한 유효성 검사 규칙 등이 있습니다. 유형을 변경하는 방법을 알아보겠습니다.

type="checkbox"를 사용하여 이제 브라우저에서 텍스트 필드 대신 체크박스를 렌더링합니다. 체크박스에는 추가 속성도 제공됩니다. checked 속성을 설정하여 선택된 것으로 표시할 수 있습니다.

다양한 유형도 선택할 수 있습니다. 자세한 내용은 이후 모듈에서 살펴보겠습니다.

여러 줄 텍스트 허용

예를 들어 사용자가 댓글을 쓸 수 있는 필드가 필요합니다. 이 경우 텍스트를 여러 줄 입력할 수 있으면 좋지 않을까요? 이는 <textarea> 요소의 용도입니다.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

옵션 목록에서 선택

사용자에게 선택할 수 있는 옵션 목록을 어떻게 제공하나요? <select> 요소를 사용하면 됩니다.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

먼저 <select> 요소를 추가합니다. 다른 모든 양식 컨트롤과 마찬가지로 id 속성을 사용하여 <label>에 연결합니다. name 속성을 사용하여 고유한 이름을 지정합니다.

<select> 요소의 시작 태그와 종료 태그 사이 각각 하나의 선택 항목을 나타내는 여러 <option> 요소를 추가할 수 있습니다.

옵션마다 고유한 value 속성이 있으므로 양식 데이터를 처리할 때 옵션을 구분할 수 있습니다. 옵션 요소 내의 텍스트는 사람이 읽을 수 있는 값입니다.

선택을 변경하지 않고 이 <select>를 사용하여 양식을 제출하는 경우 요청에 color=orange가 포함됩니다. 그러나 브라우저는 어떤 옵션을 사용해야 하는지 어떻게 아나요?

다음과 같은 경우를 제외하고 브라우저에서 목록의 첫 번째 옵션을 사용합니다.

  • <option> 요소 하나에 selected 속성이 있습니다.
  • 사용자가 다른 옵션을 선택합니다.

옵션 미리 선택하기

selected 속성을 사용하면 옵션 하나를 미리 선택할 수 있습니다. 이는 <option> 요소가 정의된 순서와 관계없이 기본값이 됩니다.

그룹화 양식 컨트롤

양식 컨트롤을 그룹화해야 하는 경우가 있습니다. <fieldset> 요소를 사용하면 됩니다.

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

<fieldset> 요소 내부의 <legend> 요소를 발견하셨나요? 그것이 어디에 사용된다고 생각하세요?

'양식 컨트롤 그룹을 설명하는 것'이 맞다면

모든 <fieldset> 요소에는 <legend> 요소가 필요합니다. 모든 양식 컨트롤에 연결된 <label> 요소가 필요한 것처럼 말입니다. 또한 <legend>는 <fieldset>의 첫 번째 요소여야 합니다. <legend> 요소 다음에 그룹에 포함되어야 하는 양식 컨트롤을 정의할 수 있습니다.

양식 제출하기

양식 컨트롤을 추가하고 그룹화하는 방법을 알아본 후 사용자가 양식을 제출하는 방법이 궁금할 수 있습니다.

첫 번째 옵션은 <button> 요소를 사용하는 것입니다.

<button>Submit</button>

사용자가 제출 버튼을 클릭하면 브라우저가 <form> 요소의 action 속성 양식 컨트롤의 모든 데이터가 표시됩니다.

<input> 요소를 <button> 요소 대신 type="submit"와 함께 사용할 수도 있습니다. 입력은 <button>과 같이 표시되고 동작합니다. <label> 요소를 사용하는 대신 <input>의 경우 value 속성을 대신 사용하세요.

<input type="submit" value="Submit">

또한 양식 입력란에 포커스가 있을 때 Enter 키를 사용하여 양식을 제출할 수도 있습니다.

이해도 확인

양식 요소에 관한 지식 테스트

<label>를 양식 컨트롤에 연결하려면 어떻게 해야 하나요?

<label>의 for='color' 및 <input>의 name='color'
다시 시도해 보세요.
<label>의 for='color' 및 <input>의 id='color'
정답입니다.
<label>의 id='color' 및 <input>의 for='color'
다시 시도해 보세요.
<label>의 name='color' 및 <input>의 for='color
다시 시도해 보세요.

다선형 양식 컨트롤에는 무엇을 사용하나요?

type='multi-line'가 포함된 <input> 요소
다시 시도해 보세요.
<text> 요소
다시 시도해 보세요.
<textarea> 요소
🎉
type='long'가 포함된 <input> 요소
다시 시도해 보세요.

양식을 제출하려면 어떻게 해야 하나요?

<button> 요소 클릭
정답은 한 가지 옵션입니다.
Enter 키 사용
정답은 한 가지 옵션입니다.
type='submit'가 있는 <input> 요소 클릭
정답은 한 가지 옵션입니다.
위 항목 모두
정답입니다. 모든 답변은 양식을 제출할 수 있는 옵션입니다.

리소스