formularze w html5

Atrybuty formularza:

elementy wejścia i jego atrybuty

Element będący dzieckiem formularza może znajdować się poza formularzem poprzez połączenie go z ID formularza:

<input type="text" form="formid" name="name">


<form id="formid">
</form>

Formularze w html5 – wartości dla elementów danych wejściowych:

 

Formularze w html5 – atrybuty elementu danych wyjściowych:

type=”number” – kontrolki spinner do zwiększania/zmniejszania wartości wpisanej w pole

 

np.:


<input type="checkbox" name="news" checked/>

Pola Formularza:

 

Atrybutu pól:


<form>
 <input type="text" name="summit" list="summits">
 <datalist id="sumits">
<option value="Everest">Everest</option>
<option value="Kilimanjaro">Kilimanjaro</option>
<option value="Denali">Denali</option>
 </datalist>
</form>

 

podział na kategorie dzięki znacznikowi <optgroup> z atrybutem label wyświetlającym w liście opis grupy.

 

<textarea name="description" rows="10" cols="50">Write something to me</textarea>

 

atrybuty pola textarea:

 

Znaczniki grupujące pola formularza:

<label for="mountain">Mountain:</label>
<input type="text" id="mountain" />

 


<fieldset>

<legend>Elevation of Mountains</legend>



Mount Everest <meter min="6000" max="10000" value="8848"></meter>



Mount Everest <meter min="0%" max="100%" value="88%"></meter>

</fieldset>



Progress: <progress id="progress" max="100">0%</progress>


<form onsubmit="return flase">
 <input name="a" type="number" step="any"> + 
 <input name="b" type="number" step="any"> =
 <output onforminput="value a.valueAsNumber + b.valueAsNumber"></output>
</form>

 

CSS:

input[type=”radio”] {

}
input[type=”text”].focus, input[type=”text”]:focus {

}

 


<form enctype="multipart/form-data" action="kontakt.php" method="post" id="searchForm" >
<p>
<input type="text" name="login" size="25" maxlength="25" class="wpis-search" value="wpisz szukaną frazę"/>
<input type="submit" name="search" value="" class="wyslij-search"/>
</p>
</form>
<input type="text" name="lokalizacja" value="gmina" class="pole-1 required"
onfocus="if (this.value=='gmina') { this.value=''; }"
onblur="if (this.value=='') { this.value='gmina'; }" />

#form #html5

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.