8.1 태그 <datalist>
태그 <datalist>는 <input> 요소에 대한 사전 정의된 옵션 목록을 제공하는데 사용돼. 이걸로 사용자는 제안된 옵션 목록에서 값을 선택할 수 있어서 데이터 입력이 더 쉬워지고 정확하고 예측 가능한 입력이 가능해져.
문법
<datalist id="list-id">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
</datalist>
<input list="list-id">
<datalist> 태그는 특정한 속성은 없지만, <input> 요소와 list 속성을 통해 연결되는 게 중요해. <datalist> 태그의 id 속성은 <input> 요소의 list 속성 값과 같아야 돼.
사용 예제:
<form>
<label for="browser">브라우저 선택:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist>
<button type="submit">보내기</button>
</form>
설명
<datalist>요소: 입력 가능한 값들의 목록을 포함함<input>요소: browsers 식별자를 통해<datalist>요소와 연결되는list속성을 포함함
<datalist> 사용의 이점
- 사용자 편의성: 사전 정의된 옵션을 제공하면 사용자가 더 빠르고 정확하게 데이터를 입력할 수 있어
- 입력 오류 감소: 사전 정의된 옵션을 제안하면 입력 오류의 수를 줄일 수 있어
- 사용자 경험 향상: 사용자가 제안된 옵션에서 쉽게 선택할 수 있어서 폼이 더 인터랙티브하고 편리해져
<datalist>의 제한 사항
- 스타일링 지원 제한: 일반 요소만큼 유연하게 스타일링할 수 없어
- 구현 차이: 서로 다른 브라우저에서 옵션 목록을 다르게 표시할 수 있어서 사용자 경험이 일관되지 않을 수 있어
8.2 태그 <output>
태그 <output>는 JavaScript를 사용하여 수행된 연산 또는 작업의 결과를 표시하는 데 사용돼. 이 태그는 연산 결과, 폼 데이터 또는 실시간으로 변경될 수 있는 다른 값을 표시하는 데 완벽해.
문법
<output name="result" for="input-id-1 input-id-2">결과</output>
속성
name:<output>요소의 이름을 정의하며, JavaScript에서 값을 얻거나 변경하는 데 사용될 수 있어for: 현재<output>값과 관련된 요소의 식별자 목록을 포함해. 여러 입력 요소와 출력물을 연결하는 데 유용해
사용 예제:
<form oninput="calculateSum()">
<label for="num1">숫자 1:</label>
<input type="number" id="num1" name="num1">
<br>
<label for="num2">숫자 2:</label>
<input type="number" id="num2" name="num2">
<br>
<output id="result" name="result" for="num1 num2">0</output>
</form>
function calculateSum() {
const num1 = parseFloat(document.getElementById('num1').value) || 0;
const num2 = parseFloat(document.getElementById('num2').value) || 0;
const sum = num1 + num2;
document.getElementById('result').value = sum;
}
설명
- 요소
<output>: 연산 결과를 표시하는 데 사용돼 - 속성
for및name:<output>요소를 입력 요소와 연결하여 JavaScript에서 쉽게 식별할 수 있도록 해줘 - 함수
calculateSum(): 입력 요소의 값이 변경될 때 호출되어<output>값을 업데이트해
<output> 사용의 이점
- 결과 표시의 용이함:
<output>태그는 연산 결과나 기타 동적 데이터를 표시하는 데 의미적으로 올바른 방법을 제공해 - JavaScript와의 통합 용이성: JavaScript를 사용하여
<output>값을 쉽게 얻고 변경할 수 있어서 동적 웹 애플리케이션에 이상적이야 - 코드의 깨끗함:
<output>의 사용은 HTML 코드를 깨끗하고 의미적으로 올바르게 유지하는 데 도움이 되어 코드의 유지보수성과 가독성을 향상시켜줘
<output>의 제한 사항
- 스타일 지원 제한:
<datalist>처럼,<output>요소의 스타일링도 다른 요소만큼 유연하지 않을 수 있어 - JavaScript 의존성: 대부분의 경우
<output>은 JavaScript와 함께 사용되며, 모든 시나리오에 적합하지 않을 수 있어
8.3 태그 <label>
태그 <label>은 폼 요소에 대한 텍스트 라벨을 생성하는 데 사용돼. 이걸로 for 속성을 통해 또는 <label> 태그 내에 폼 요소를 포함시켜서 폼 요소와 연결할 수 있어. 이 방법들은 제한된 능력을 가진 사용자가, 예를 들어 화면 읽기 프로그램을 사용하는 사람들이 폼에 더 잘 접근할 수 있도록 도와줘.
속성 for는 라벨과 폼 요소를 연결시키며, 요소의 식별자(id 속성의 값)를 사용해. 이걸로 사용자는 라벨을 클릭해서 연결된 폼 요소를 포커스하거나 활성화할 수 있어.
for 속성 사용 예제:
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
폼 요소 포함하기
폼 요소는 <label> 태그 내에 포함될 수 있으며, 이 또한 둘을 연결시켜줘. 이 경우 for 속성이 필요하지 않아.
폼 요소 포함 사용 예제:
<label>사용자 이름:
<input type="text" name="username">
</label>
<label> 태그 사용의 이점
- 접근성 향상: 라벨은 화면 읽기 프로그램을 사용하는 사용자가 각 폼 요소에 어떤 데이터를 기입해야 하는지를 이해하도록 도와줘. 화면 읽기 프로그램은 폼 요소와 함께 라벨을 읽어주므로 폼의 접근성이 좋아져.
- 사용성: 사용자는 라벨을 클릭해서 해당 폼 요소에 포커스하거나 활성화할 수 있어. 특히 체크박스나 라디오 버튼 같은 작은 요소에 유용해.
- 명확성 향상: 라벨은 사용자가 각 폼 요소에 어떤 데이터를 입력해야 하는지를 더 잘 이해할 수 있도록 도와줘, 이로 인해 데이터 입력 중 실수가 줄어들어.
GO TO FULL VERSION