Formularze

Przyszła pora na omówienie formularzy.Niestety nie bedą one nigdzie wysyłane.My zajmiemy się samym tworzeniem ich.

Do ich stworzenia bedziemy potrzebowali znacznika <form></form>, który jest foremką dla formularza.Do stworzenia pól do wypełniania potrzebna nam bedzie jeszcze <label></label> oraz <input />.

Tak będzie wyglądał kod:

		<form>
		  <label> Napis przed polem: <input type="typ" name="nazwa"/> </label>
		</form>

Atrybut type może przyjmować dużo różnych wartości, aby odróżnić od siebie odpowiednie pola.Niżej pokazane są jego rodzaje:

text

						
	<form>
	  <label> Pole tekstowe: <input type="typ" name="text"/> </label>
	</form>

password

						
<form>
  <label> Pole hasła: <input type="password" name="nazwa"/> </label>
</form>

radio

						
 <form>Pole jednokrotnego wyboru: <br/>
  <label> Opcja1 <input type="radio" name="nazwa1" value="1"/> </label>
  <label> Opcja2 <input type="radio" name="nazwa2" value="2"/> </label>
  <label> Opcja3 <input type="radio" name="nazwa3" value="3"/> </label>
 </form>

checkbox

						
 <form>Pole wielokrotnego wyboru: <br/>
  <label> Opcja1 <input type="checkbox" name="nazwa1" value="1"/> </label>
  <label> Opcja2 <input type="checkbox" name="nazwa1" value="2"/> </label>
  <label> Opcja3 <input type="checkbox" name="nazwa1" value="3"/> </label>
 </form>

submit

						
	<form>
	  <input type="submit" value="Wyślij"/>
	</form>

email

						
	<form>
	  <label> Pole maila: <input type="email" name="nazwa"/> </label>
	</form>

date

						
	<form>
	  <label> Pole daty: <input type="date" name="nazwa"/></label>
	</form>

select

						
		<form>
		  <select name="nazwa">
			<option value="1"> Opcja 1 </option>
			<option value="2"> Opcja 2 </option>
			<option value="3"> Opcja 3 </option>
		  </select>
		</form>

file

						
	<form>
	  <label> Pole przesyłu: <input type="file" name="nazwa"/></label>
	</form>

Do inputów można dodawać również inne atrybuty takie jak:

required

Używamy go gdy chcemy oznaczyć pole jako obowiązkowe.

 <form>			
     <label> Pole tekstowe: <input type="text" 
	    name="nazwa" required /> </label>
 </form>

hidden

Używamy go, aby ukryć pole.

 <form>			
 <label> Pole tekstowe: <input type="text" name="nazwa" hidden /> </label>
 </form>

placeholder

Używamy go, aby ustawić domyślny tekst, który pojawi się w formularzu, ale zniknie natychmiast po kliknieciu na niego kursorem.

		<form>			
		  <label> Pole tekstowe: <input type="text" 
		  name="nazwa" placeholder="podpowiedź" /> </label>
		</form>

autofocus

Dodajemy go w miejsce gdzie ma być skupiony kursor gdy użytkownik wejdzie na stronę

 <form>			
  <label> Pole tekstowe: <input type="text" name="nazwa" focus /> </label>
 </form>