Sobes.tech
Intervijas palīdzība
Resursi
Intervijas sagatavošana
Resursi
Darba meklēšana
Resursi
Juridisks
Atpakaļ pie jautājumiem
Junior

Kā jūs izveidosiet HTML formu?

sobes.tech AI

Atbilde no AI

Lai izveidotu HTML formu, es izmantosšu <form> elementu. Tajā iekļausies vadības elementi, piemēram, teksta lauki (<input type="text">), paroles lauki (<input type="password">), atzīmes (<input type="checkbox">), radiobuttoni (<input type="radio">), nolaižamās saraksti (<select> un <option>), teksta laukumi (<textarea>) un sūtīšanas pogas (<button type="submit"> vai <input type="submit">).

Katram formas elementam būs name atribūts, lai to varētu identificēt servera pusē, un parasti arī id atribūts, lai to varētu sasaistīt ar <label>.

<form> atribūti:

  • action: URL, uz kuru tiks nosūtīti formas dati.
  • method: HTTP pieprasījuma metode (GET vai POST).
  • enctype: Datu kodēšanas tips sūtīšanas laikā (piemēram, multipart/form-data failu augšupielādei).

Piemērs vienkāršai formai:

<form action="/submit-form" method="post">
  <label for="username">Lietotājvārds:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Parole:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Atcerēties mani</label><br><br>

  <label for="country">Valsts:</label><br>
  <select id="country" name="country">
    <option value="ru">Krievija</option>
    <option value="us">ASV</option>
  </select><br><br>

  <label for="message">Ziņa:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Sūtīt</button>
</form>

Formu validācija var tikt īstenota gan klienta, gan servera pusē:

HTML5 validācijas atribūti:

  • required: Lauks ir obligāti aizpildāms.
  • minlength, maxlength: Minimālais un maksimālais teksta garums.
  • min, max: Minimālā un maksimālā vērtība skaitļu laukos.
  • type ar dažādām vērtībām (email, url, number, date un citiem) automātiskai validācijai.
  • pattern: Regulārais izteiksmes apstiprinājums validācijai.

Piemērs ar HTML5 validāciju:

<form action="/submit-form" method="post">
  <label for="email">E-pasts:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Vecums (no 18 līdz 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Pasta indekss (5 cipari):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Sūtīt</button>
</form>

Formu stilizēšanai tiek izmantots CSS. Sarežģītākas loģikas vai asīnhrona datu sūtīšanas gadījumā tiek izmantots JavaScript. Lai uzlabotu pieejamību, tiek izmantoti atbilstoši ARIA atribūti un pareiza HTML struktūra.

IepriekšējaisTālāk