양식을 양방향으로 만들려면 양식 요소를 추가해야 합니다. 데이터를 입력하고 선택하는 컨트롤, 컨트롤을 설명하는 요소, 필드를 그룹화하는 요소, 양식을 제출하는 버튼이 있습니다.
양식 요소란 무엇인가요?
<input> 요소인 <input type="text"> 및 <input type="file">가 두 개 표시됩니다. 왜 다르게 표시되나요?
브라우저는 요소 이름과 유형 속성을 기반으로 서로 다른 사용자 인터페이스를 표시하고, 서로 다른 유효성 검사 규칙을 사용하며, 기타 여러 기능을 제공합니다. 적절한 양식 컨트롤을 사용하면 더 나은 양식을 빌드할 수 있습니다.
양식 요소의 라벨
사용자가 좋아하는 색상을 입력할 수 있는 입력란을 추가하려고 한다고 가정해 보겠습니다.
이를 위해서는 양식에 <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> 요소가 있는지 확인해 보세요. 어떤 용도로 사용될까요?
'양식 컨트롤 그룹을 설명하기 위해'라고 답했다면 맞습니다.
모든 양식 컨트롤에 연결된 <label> 요소가 필요한 것처럼 모든 <fieldset> 요소에는 <legend> 요소가 필요합니다.
또한 <legend>는 <fieldset>의 첫 번째 요소여야 합니다.
<legend> 요소 다음에는 그룹에 포함되어야 하는 양식 컨트롤을 정의할 수 있습니다.
양식 제출
양식 컨트롤을 추가하고 그룹화하는 방법을 알아본 후에는 사용자가 양식을 제출하는 방법을 궁금해할 수 있습니다.
첫 번째 옵션은 <button> 요소를 사용하는 것입니다.
<button>Submit</button>
사용자가 제출 버튼을 클릭하면 브라우저는 양식 컨트롤의 모든 데이터를 포함하여 <form> 요소의 action 속성에 지정된 URL에 요청을 보냅니다.
<button> 요소 대신 type="submit"와 함께 <input> 요소를 사용할 수도 있습니다.
입력은 <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> 요소를 클릭합니다.