HTML form reprezintă o parte crucială a dezvoltării web, care permite utilizatorilor să interacționeze cu un site web și să trimită date către un server. Form sunt utilizate pentru o gamă largă de scopuri, cum ar fi colectarea informațiilor utilizatorului form, procesarea intrărilor utilizatorului și activarea acțiunilor utilizatorului pe un site web. În acest articol, vom explora atributele și diferitele tipuri de câmpuri de intrare, vom selecta elemente, zone de text și butoane utilizate în mod obișnuit în HTML form.
Câmpuri de intrare
<input type="text">: creează un câmp de introducere a textului în care utilizatorii pot introduce caractere alfanumerice.<input type="password">: Afișează un câmp de introducere a parolei care maschează caracterele introduse.<input type="email">: Oferă validarea e-mailului pentru câmpurile de introducere care necesită o adresă de e-mail validă.<input type="number">: Restricţionează introducerea numai la valori numerice.<input type="checkbox">: reprezintă o casetă de selectare pe care utilizatorii o pot selecta sau deselecta.<input type="radio">: Reprezintă un buton radio care permite utilizatorilor să selecteze o opțiune dintr-un grup de opțiuni.<input type="file">: permite utilizatorilor să selecteze și să încarce fișiere.<input type="submit">: Afișează un buton care trimite form atunci când este făcut clic.<input type="reset">: Afișează un buton care resetează form la starea inițială.<input type="date">: oferă un selector de date pentru selectarea datelor.<input type="time">: Permite utilizatorilor să introducă valori de timp.
Selectați Elemente
<select>: creează un meniu derulant cu opțiuni selectabile.<option>: definește o opțiune din meniul drop-down, plasată în interiorul<select>etichetei.<optgroup>: Grupează opțiunile asociate împreună în meniul drop-down.<select multiple>: Permite utilizatorilor să selecteze mai multe opțiuni simultan ținând apăsată tasta Ctrl(sau tasta Comandă pe Mac) în timp ce dau clic.
Zonele de text
<textarea>: creează un câmp de introducere a textului cu mai multe linii în care utilizatorii pot introduce și edita blocuri mai lungi de text. Poate fi redimensionat și configurat cu atribute precum rows și cols pentru a-și defini dimensiunile.
Butoane
<button>: Reprezintă un buton care poate declanșa diverse acțiuni în cadrul unui form. Poate fi folosit pentru a trimite un form, pentru form o funcție JavaScript sau pentru a naviga la o altă pagină.
Exemplu de utilizare:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
Acest exemplu prezintă utilizarea diferitelor form elemente, inclusiv input câmpuri, textarea, și un buton. Simțiți-vă liber să personalizați elementele și atributele în funcție de cerințele dumneavoastră specifice. checkbox select dropdown submit form