HTML form on tärkeä osa verkkokehitystä, jonka avulla käyttäjät voivat olla vuorovaikutuksessa verkkosivuston kanssa ja lähettää tietoja palvelimelle. Form käytetään monenlaisiin tarkoituksiin, kuten käyttäjien keräämiseen form, käyttäjän syötteiden käsittelyyn ja käyttäjien toimien mahdollistamiseen verkkosivustolla. Tässä artikkelissa tutkimme HTML:ssä yleisesti käytettyjä attribuutteja ja erityyppisiä syöttökenttiä, valittuja elementtejä, tekstialueita ja painikkeita form.
Syöttökentät
<input type="text">: Luo tekstinsyöttökentän, johon käyttäjät voivat syöttää aakkosnumeerisia merkkejä.<input type="password">: Näyttää salasanan syöttökentän, joka peittää syötetyt merkit.<input type="email">: Tarjoaa sähköpostin vahvistuksen syöttökentille, jotka edellyttävät kelvollista sähköpostiosoitetta.<input type="number">: Rajoittaa syöttämisen vain numeerisiin arvoihin.<input type="checkbox">: Edustaa valintaruutua, jonka käyttäjät voivat valita tai poistaa valinnan.<input type="radio">: Edustaa valintanappia, jonka avulla käyttäjät voivat valita yhden vaihtoehdon vaihtoehtojen ryhmästä.<input type="file">: Antaa käyttäjien valita ja ladata tiedostoja.<input type="submit">: Näyttää painikkeen, joka lähettää painikkeen, form kun sitä napsautetaan.<input type="reset">: Näyttää painikkeen, joka palauttaa form sen alkuperäiseen tilaan.<input type="date">: Tarjoaa päivämäärävalitsimen päivämäärien valitsemista varten.<input type="time">: Antaa käyttäjien syöttää aika-arvoja.
Valitse Elementit
<select>: Luo avattavan valikon valittavissa olevilla vaihtoehdoilla.<option>: Määrittää vaihtoehdon avattavassa valikossa, joka on sijoitettu tunnisteen sisään<select>.<optgroup>: Ryhmittelee liittyvät vaihtoehdot yhteen avattavassa valikossa.<select multiple>: Antaa käyttäjien valita useita vaihtoehtoja samanaikaisesti pitämällä Ctrl-näppäintä(tai Macissa Command-näppäintä) painettuna napsautuksen aikana.
Tekstialueet
<textarea>: Luo monirivisen tekstinsyöttökentän, johon käyttäjät voivat kirjoittaa ja muokata pidempiä tekstilohkoja. Sen kokoa voidaan muuttaa ja konfiguroida attribuutilla, kuten rows ja cols määrittää sen mitat.
Painikkeet
<button>: Edustaa painiketta, joka voi käynnistää erilaisia toimintoja form. Sitä voidaan käyttää lähettämään JavaScript-funktiota form kohti form tai siirtymään toiselle sivulle.
Käyttöesimerkki:
<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>
Tämä esimerkki esittelee eri elementtien käyttöä form, mukaan lukien input kentät, textarea, checkbox, select dropdown ja submit painike. Voit vapaasti muokata elementtejä form ja määritteitä erityisvaatimustesi mukaan.