Podstawą formularza jest znacznik kontenerowy form. W nim umieszczamy wszystkie pola formularzy. Potrzebne będą również label oraz input który się w nim znajduje kiedy chcemy nadać mu etykietę.
Przykład
<form> <label> Login <input type="text" name="login"/></label> </form>
W powyższym przykładzie została użyta jedna wartość atrybutu type, mianowicie text i jest to domyślna wartość tego atrybutu. Istnieją też inne gdzie:
type="password"
<form> <label> Hasło: <input type="password" name="hasło"/></label> </form>
type="tel"
<form> <label> Numer telefonu: <input type="tel" name="tel"/></label> </form>
type="email"
<form> <label> E-mail: <input type="email" name="email"/></label> </form>
type="date"
<form> <label> Data: <input type="date" name="data"/></label> </form>
type="radio"
Jest to pole jednokrotnego wyboru - wartość atrybutu name musi być taka sama
<form> Wybierz cyfrę: <br> <label> Jeden <input type="radio" name="cyfra" value="1"/></label> <label> Dwa <input type="radio" name="cyfra" value="2"/></label> <label> Trzy <input type="radio" name="cyfra" value="3"/></label> </form>
type="checkbox"
Jest to pole wielokrotnego wyboru.
<form> Cyfry: <br> <label> Jeden <input type="checkbox" name="jeden" value="1"/></label> <label> Dwa <input type="checkbox" name="dwa" value="2"/></label> <label> Trzy <input type="checkbox" name="trzy" value="3"/></label> </form>
type="file"
<form> <label> Plik: <input type="file" name="plik"/></label> </form>
type="submit"
<form> <input type="submit" value="Wyślij"/> </form>
type="select"
<form> <select name="wybierz jedno"> <option value="1"> Jeden </option> <option value="2"> Dwa </option> <option value="3"> Trzy </option> </select> </form>
Do inputów można również dodawać dodatkowe atrybuty:
| required | Atrybut dodawany do pól które są obowiązkowe do wypełnienia, jeśli zostaną puste, formularz wyświetli o tym informację |
| hidden | Dodawane do pól które mają pozostać ukryte |
| placeholder | Umieszcza w formularzu znak wodny, który jest widoczny wpisania wartości przez użytkownika |
| autofocus | Ten strybut dodajemy do pola, które chcielibyśmy zeby na nimm był skupiony kursor w momencie wejścia na strone |
Przy tworzeniu formularzy, korzysta się też ze znacznika fieldset, który grupuje inputy. Znacznik legend pozwala je ładnie podpisać.