A HTML form a webfejlesztés kulcsfontosságú részét képezi, amely lehetővé teszi a felhasználók számára, hogy interakcióba lépjenek egy weboldallal, és adatokat küldjenek el a szerverre. Form sokféle célra használják, mint például a felhasználók összegyűjtése form, a felhasználói bevitelek feldolgozása és a felhasználói műveletek engedélyezése a webhelyen. Ebben a cikkben megvizsgáljuk a HTML-ben általánosan használt attribútumokat és különböző típusú beviteli mezőket, kiválasztjuk az elemeket, szövegterületeket és gombokat form.
Beviteli mezők
<input type="text">: Létrehoz egy szövegbeviteli mezőt, ahol a felhasználók alfanumerikus karaktereket írhatnak be.<input type="password">: Jelszóbeviteli mezőt jelenít meg, amely elfedi a beírt karaktereket.<input type="email">: E-mail-ellenőrzést biztosít az érvényes e-mail-címet igénylő beviteli mezőkhöz.<input type="number">: A bevitelt csak számértékekre korlátozza.<input type="checkbox">: Olyan jelölőnégyzetet jelent, amelyet a felhasználók bejelölhetnek vagy törölhetnek.<input type="radio">: Olyan választógombot jelöl, amely lehetővé teszi a felhasználók számára, hogy egy opciót válasszanak ki a lehetőségek csoportjából.<input type="file">: Lehetővé teszi a felhasználók számára a fájlok kiválasztását és feltöltését.<input type="submit">form: Megjelenít egy gombot, amely kattintáskor elküldi a .<input type="reset">: Megjelenít egy gombot, amely visszaállítja a form kezdeti állapotot.<input type="date">: Dátumválasztót biztosít a dátumok kiválasztásához.<input type="time">: Lehetővé teszi a felhasználók számára időértékek bevitelét.
Válassza az Elemek lehetőséget
<select>: Létrehoz egy legördülő menüt kiválasztható opciókkal.<option>: Meghatároz egy opciót a legördülő menüben, a címke belsejében<select>.<optgroup>: A kapcsolódó opciókat csoportosítja a legördülő menüben.<select multiple>: Lehetővé teszi a felhasználók számára, hogy egyszerre több lehetőséget is kiválaszthassanak a Ctrl billentyű(vagy Mac gépen a Command billentyű) lenyomva tartásával, miközben kattintanak.
Szövegterületek
<textarea>: Többsoros szövegbeviteli mezőt hoz létre, ahol a felhasználók hosszabb szövegblokkokat írhatnak be és szerkeszthetnek. Átméretezhető és konfigurálható olyan attribútumokkal, mint rows például cols a méretek meghatározása.
Gombok
<button>: Olyan gombot jelöl, amely különféle műveleteket indíthat el egy form. Használható egy form, form JavaScript-függvény beküldésére, vagy egy másik oldalra való navigálásra.
Használati példa:
<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>
form Ez a példa különféle elemek, például input mezők, textarea, checkbox, select dropdown és gomb használatát mutatja be submit. Nyugodtan testreszabhatja az form elemeket és attribútumokat sajátos igényei szerint.