și în HTML

Formulare și introducere date HTML 2.0+

Creează un meniu derulant (drop-down list) de unde utilizatorul alege una sau mai multe opțiuni.

Sintaxă tag

<select name="oras">
  <option value="is">Iași</option>
  <option value="cj" selected>Cluj-Napoca</option>
</select>

Ce face <select> și <option>

Tagul <select> este containerul meniului derulant, iar fiecare variantă de alegere este definită printr-un tag <option>.

Atributul value al opțiunii selectate este cel care ajunge la server la trimitere. Dacă vrei ca o opțiune să fie aleasă din start, adaugă atributul boolean selected. Opțiunile pot fi împărțite pe categorii tematice cu tagul <optgroup>.

Atribute

Atribut	Descriere
name	Numele variabilei trimise la server.
multiple	Permite selectarea mai multor opțiuni simultan (cu tasta Ctrl/Cmd).
size	Numărul de opțiuni vizibile simultan fără derulare.
disabled	Dezactivează întregul meniu derulant.

Exemple

Exemplul 1: Meniu derulant pentru alegerea județului

Prima opțiune este inactivă și servește drept instrucțiune.

<label for="judet">Alege județul:</label>
<select id="judet" name="judet" required>
  <option value="" disabled selected>Selectează un județ...</option>
  <option value="IS">Iași</option>
  <option value="CJ">Cluj</option>
  <option value="TM">Timiș</option>
</select>

Ce afișează browserul

Un meniu derulant cu săgeată în dreapta; la clic se deschide lista cu Iași, Cluj și Timiș.

Greșeli frecvente

• Omiterea atributului value din tagurile
; fără value, browserul trimite textul afișat, ceea ce poate crea probleme la caractere speciale sau limbi diferite.

Comenzi înrudite

• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.

Structura documentului

• <!DOCTYPE html>
• <html>
• <head>
• <title>
• <meta>
• <link>
• <style>
• <script>
• <body>

Text și formatare

• <h1> – <h6>
• <p>
• <strong> și <em>
• <span>
• <br> și <hr>
• <blockquote>
• <code> și <pre>
• <mark> și <small>

Linkuri și multimedia

• <a>
• <img>
• <picture>
• <figure> și <figcaption>
• <video>
• <audio>
• <iframe>

Liste

• <ul>
• <ol>
• <li>
• <dl>, <dt> și <dd>

Tabele

• <table>
• <thead>, <tbody> și <tfoot>
• <tr>
• <th>
• <td>

Formulare și introducere date

• <form>
• <input>
• <label>
• <button>
• <textarea>
• <select> și <option>
• <fieldset> și <legend>

Structură semantică (Layout)

• <header>
• <nav>
• <main>
• <article>
• <section>
• <aside>
• <footer>
• <div>

Elemente interactive

• <details> și <summary>
• <dialog>
• <template>