양식을 대화형으로 만들려면 양식 요소를 추가해야 합니다. 데이터를 입력하고 선택하는 컨트롤, 컨트롤을 설명하는 요소, 필드를 그룹화하는 요소, 양식을 제출하는 버튼이 있습니다.
양식 요소란 무엇인가요?
두 개의 <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 및 type 속성은 어떤가요?
name 속성
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>
사용자가 Submit 버튼을 클릭하면 브라우저가 <form> 요소의 작업 속성에 지정된 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> 요소 클릭