?? ?? ???? html5 <select></select> ?? ??

html5 <select></select> ??? ?? ?? ??? ?????? ?? ?? ?????. ???? ?? ???? ?????. ?? ???? <select></select> ?? ??? ????, ?? ??? <option></option> ??? ???? ???, ??? ?? ???? ?? ??? ??? ?????. ? <option></option> ??? value ??? ??? ??? ? ?? ? ?? ?????. <option></option> ??? ??? ??? ???? ?? ????.

??? ?? ??? ????.

 <code class="html"><select id="myDropdown"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </select></code>

??? ??, ??? ? ???? ? ?? ???? ?? ?? ??? ????. ???? ??? ???? ? ( "Apple", "Banana"?? "Orange")? ?? ( <select></select> ? ??? ??? ??)?? ????? JavaScript? ???? ??? ? ? ????. selected ??? ???? ??? ?? ??? ?? ????.

 <code class="html"><option value="banana" selected>Banana</option></code>

?? disabled ??? ???? ???? ?? ??? ???? ??? ? ?? ????.

 <code class="html"><option value="grape" disabled>Grape (out of season)</option></code>

size ??? ?? ??? ?? ?? ?? ? ???? ?? ?? ?? ?? ? ? ????.

 <code class="html"><select id="myDropdown" size="3"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </select></code>

CSS??? ???? HTML5 ?? ?? ??

??? CSS? ?? ???? <select></select> ??? ???? ???? ?? ??? ??? ???? ? ????. ?? ??? ?? ???? ? ?? ??? ?? ??? ???? ?? ?? ?? ??? ?????.

width , font-family , font-size , color , background-color ? border ? ?? ?? CSS ??? ???? <select></select> ??? ?? ??? ???? ? ? ????.

 <code class="css">#myDropdown { width: 200px; padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }</code>

??? ?? ?? ?? (?? ??) ????? ? ??? ????. :hover ? :focus ?? ???? ???? ??? ????? ? ? ????. ?? ???? ???? ???? ?? JavaScript ?? CSS ??? ??? ????? ???? ? ?? ?? ???? ??????? (????? ?? ?? ???? ?? ??). ?? ?? ???? ??? Bootstrap ?? Tailwind CSS? ?? CSS ??? ??? ???? ?? ??? ?? ??? ???? ??????.

<select></select> ??? ?? ??? ?? ??

???? ?? ??? ?? ?? ??? ??? ? ????? ? ?????. ? ?? ?? ?? ??? ??? ????.

• ??? ?? : ?? <label></label> ??? <label></label> ? for attribute? <select></select> ? id ??? ???? <select></select> ??? ?? ??????. ?? ?? ??? ??? ?? ?? ??? ?? ??? ??? ???? ?? ? ? ????.

 <code class="html"><label for="myDropdown">Choose a Fruit:</label> <select id="myDropdown"> <!-- options here --> </select></code>

• ???? ?? ? : ?? ?? ????? ??? ???? ??????. ????? ???? ?? ??? ?? ? ?? ? ?? ? ???? ????.
• ARIA ?? : ????? ???? ????? ??? ARIA ??? ???? ???? ? ????. ?? ??, aria-describedby <select></select> ???? ?? ??? ? ??? ??? ??? ? ????.
• ??? ?? : ???? ?????? ??? ???? ??? ? ??? ?????? (?? ??? ???? ?? ?, ??? ?? ???? ????? ??).

JavaScript? ?? <select></select> ??? ???? ??? ?

JavaScript? <select></select> ??? ???? ???? ??? ??? ?????. ???? ??? ??, ?? ?? ??? ? ????.

?? ?? :

 <code class="javascript">const selectElement = document.getElementById("myDropdown"); const newOption = document.createElement("option"); newOption.value = "grape"; newOption.text = "Grape"; selectElement.appendChild(newOption);</code>

??? ????? :

 <code class="javascript">const selectElement = document.getElementById("myDropdown"); selectElement.removeChild(selectElement.options[0]); // Removes the first option</code>

???? ??? :

 <code class="javascript">const fruits = ["Apple", "Banana", "Orange", "Grape"]; const selectElement = document.getElementById("myDropdown"); fruits.forEach(fruit => { const newOption = document.createElement("option"); newOption.value = fruit.toLowerCase(); newOption.text = fruit; selectElement.appendChild(newOption); });</code>

? ?? ?? ??? ?????. ?? ??? ?????? ???? ???? ?? ??? ?? ?????? ????? ??? ??? ?? React, Vue ?? Angular? ?? JavaScript ??? ??? ???? ?? ??? ? ????. ?? ???? ?? ??? ?? ??? ??? ?? ???????.

? ??? html5 & lt; select & gt;??? ?? ??? ?? ?? ? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!