Formularz HTML - przycisk zatwierdzający
- Data publikacji
- Ostatnio edytowano
Spójrzmy na następujący kod HTML:
<form>
<p>
<label>
Jaki jest Twój ulubiony kwiat?
<input type="text" name="ulubiony-kwiat">
</label>
</p>
<p>
<label>
Dlaczego ten kwiat?
<textarea name="powod"></textarea>
</label>
</p>
<p>
<label>
Jaki jest Twój ulubiony rodzaj muzyki?
<select name="rodzaj-muzyki">
<option>inny</option>
<option>rock</option>
<option>pop</option>
<option>techno</option>
<option>trance</option>
</select>
</label>
</p>
</form>Rezultat:
Nasz przykładowy kod HTML reprezentuje formularz HTML, który z kolei reprezentowany jest przez element form.
W zawartości naszego przykładowego formularza HTML występują trzy elementy HTML, które mogą przechowywać informację wprowadzoną przez użytkownika.
Wspomnianymi elementami HTML są: element input, element textarea oraz element select.
Załóżmy, że nasz przykładowy dokument HTML zostanie odwiedzony przez użytkownika, który zechce wypełnić nasz przykładowy formularz HTML. Po wypełnieniu przez wspomnianego użytkownika pól naszego przykładowego formularza HTML jedyną rzeczą, jaka pozostanie do wykonania przez wspomnianego użytkownika jest zatwierdzenie formularza HTML za pomocą przycisku zatwierdzającego.
Nasz przykładowy formularz HTML na tę chwilę nie posiada przycisku zatwierdzającego, lecz sytuację tę postaramy się zmienić.
Aby dodać do formularza HTML przycisk zatwierdzający do wyboru mamy kilka rozwiązań.
Możemy skorzystać z elementu input posiadającego atrybut type o wartości submit (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający należy podać jako wartość atrybutu value).
<input type="submit" value="zatwierdź">
Lub możemy skorzystać z elementu input posiadającego atrybut type o wartości image (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający, w przypadku gdy obrazek reprezentowany przez wspomniany element input nie mógł zostać obsłużony przez przeglądarkę internetową, należy podać jako wartość atrybutu alt).
<input type="image" src="https://webkod.pl/files/html/przycisk-1.png" alt="zatwierdź">
Lub możemy skorzystać z elementu button nieposiadającego atrybutu type (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający należy dodać do zawartości wspomnianego elementu button).
<button>zatwierdź</button>
Lub możemy skorzystać z elementu button posiadającego atrybut type o wartości submit (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający należy dodać do zawartości wspomnianego elementu button).
<button type="submit">zatwierdź</button>Przykład:
<form>
<p>
<label>
Jaki jest Twój ulubiony kwiat?
<input type="text" name="ulubiony-kwiat">
</label>
</p>
<p>
<label>
Dlaczego ten kwiat?
<textarea name="powod"></textarea>
</label>
</p>
<p>
<label>
Jaki jest Twój ulubiony rodzaj muzyki?
<select name="rodzaj-muzyki">
<option>inny</option>
<option>rock</option>
<option>pop</option>
<option>techno</option>
<option>trance</option>
</select>
</label>
</p>
<p>
<button type="submit">zatwierdź</button>
</p>
</form>Rezultat:
Aby zrozumieć proces, jaki następuje w momencie naciśnięcia przez użytkownika przycisku zatwierdzającego formularz HTML musimy zapoznać się z kilkoma kolejnymi zagadnieniami.