HTML에서 기본값 선택
이 기사에서는 HTML <select> 요소의 기본값을 선택하는 두 가지 방법에 대해 설명합니다.
selected="selected"를 사용하여 HTML <select> 요소의 기본값 선택
selected="selected" 옵션을 사용하여 HTML 코드에서 기본값을 선택할 수 있습니다. <option> 태그에 selected 속성을 씁니다. selected 속성의 값을 selected로 설정하여 웹 페이지가 처음 로드될 때 기본적으로 특정 옵션을 선택할 수 있습니다. HTML에서는 부울 속성이라고 합니다. 미리 선택한 옵션이 드롭다운 목록에 먼저 표시됩니다. 이 속성은 <option> 요소에서만 사용할 수 있습니다. Google Chrome, Internet Explorer, Firefox, Opera 등과 같은 웹 브라우저를 지원합니다.
예를 들어 HTML 본문 안에 <select> 태그를 만들고 그 안에 다섯 가지 옵션을 추가합니다. 각 옵션의 value 속성에 대해 1-5 사이의 숫자를 쓰십시오. 각 옵션에 대한 <option> 태그 사이에 One에서 Five까지의 텍스트를 씁니다. 그런 다음 기본값으로 선택하려는 특정 값의 <option> 태그를 연 직후 selected 속성을 selected 값으로 작성합니다(아래 예에서 옵션 3). 마지막으로 <select> 태그를 닫습니다.
아래 예에서는 select=selected 방법을 사용하여 드롭다운 목록에서 기본값을 선택합니다. 1에서 5까지의 값을 선택할 수 있는 드롭다운 목록을 만들었습니다. 페이지가 다시 로드되면 selected 속성을 사용하여 요소를 기본값으로 지정했기 때문에 Three 옵션이 기본적으로 로드됩니다.
예제 코드:
<body>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option selected="selected" value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</body>
<option selected>을 사용하여 HTML <select> 요소의 기본값 선택
<option selected> 옵션을 사용하여 HTML에서 기본값을 선택할 수 있습니다. 이 과정도 첫 번째 과정과 비슷합니다. 또한 부울 속성입니다. <select> 요소는 주로 사용자로부터 입력을 수집하는 데 사용됩니다. <select> 요소 안에 작성하는 <option> 태그는 드롭다운 목록에 포함된 사용 가능한 항목을 정의합니다. 특정 <option> 태그에 selected 옵션을 작성하여 해당 옵션을 기본 선택 옵션으로 지정할 수 있습니다.
예를 들어, HTML 본문 내에서 위의 방법과 같이 <select> 태그 뒤에 <option> 태그를 생성합니다. 다음 줄에서 1-5의 값을 옵션 태그로 지정하고 옵션 태그를 닫습니다. 이 과정을 다섯 번 반복합니다. 그런 다음 두 번째 <option> 태그 바로 뒤에 <selected>를 작성하여 기본값으로 선택합니다. 마지막으로 <select> 태그를 닫습니다.
아래 예에서는 <option selected> 옵션을 사용하여 기본값을 선택합니다. 페이지가 로드되면 두 번째 요소의 경우 <option selected>를 사용했기 때문에 드롭다운 목록에 기본적으로 2 옵션이 로드된 것을 볼 수 있습니다.
예제 코드:
<body>
<select>
<option> 1 </option>
<option selected> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
</body>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn