HTML form är en avgörande del av webbutveckling som tillåter användare att interagera med en webbplats och skicka data till en server. Form används för ett brett spektrum av syften, som att samla in användare, form bearbeta användarinmatningar och möjliggöra användaråtgärder på en webbplats. I den här artikeln kommer vi att utforska attributen och olika typer av inmatningsfält, välja element, textområden och knappar som vanligtvis används i HTML form.
Inmatningsfält
<input type="text">: Skapar ett textinmatningsfält där användare kan ange alfanumeriska tecken.<input type="password">: Visar ett lösenordsinmatningsfält som maskerar de angivna tecknen.<input type="email">: Ger e-postvalidering för inmatningsfält som kräver en giltig e-postadress.<input type="number">: Begränsar inmatning till endast numeriska värden.<input type="checkbox">: Representerar en kryssruta som användare kan markera eller avmarkera.<input type="radio">: Representerar en alternativknapp som låter användare välja ett alternativ från en grupp med alternativ.<input type="file">: Gör det möjligt för användare att välja och ladda upp filer.<input type="submit">: Visar en knapp som skickar den form när den klickas.<input type="reset">: Visar en knapp som återställer form till sitt ursprungliga tillstånd.<input type="date">: Tillhandahåller en datumväljare för val av datum.<input type="time">: Tillåter användare att mata in tidsvärden.
Välj Element
<select>: Skapar en rullgardinsmeny med valbara alternativ.<option>: Definierar ett alternativ i rullgardinsmenyn, placerat inuti taggen<select>.<optgroup>: Grupperar relaterade alternativ i rullgardinsmenyn.<select multiple>: Tillåter användare att välja flera alternativ samtidigt genom att hålla ned Ctrl-tangenten(eller Kommando-tangenten på Mac) medan de klickar.
Textområden
<textarea>: Skapar ett textinmatningsfält med flera rader där användare kan skriva in och redigera längre textblock. Den kan ändras i storlek och konfigureras med attribut som rows och cols för att definiera dess dimensioner.
Knappar
<button>: Representerar en knapp som kan utlösa olika åtgärder inom en form. Den kan användas för att skicka en form, enligt form en JavaScript-funktion, eller navigera till en annan sida.
Exempel på användning:
<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>
Det här exemplet visar användningen av olika form element, inklusive input fält, textarea, checkbox, select dropdown och en submit knapp. Skräddarsy gärna form elementen och attributen utifrån dina specifika krav.