html-form

HTML <form> öğesi, kullanıcı girdisi toplamak için kullanılan bir formu tanımlar:

< form>

.

form elemanlari

.

< /form>

< Form> özniteliklerinin listesi aşağıdadır:

accept-charset Gönderilen formda kullanılan karakter setini belirtir (varsayılan: sayfa karakter seti).

action Formu gönderebileceğiniz bir adresi (URL) belirtir (varsayılan: gönderen sayfa).

autocomplete Tarayıcının formu otomatik tamamlamış olup olmayacağını belirtir (varsayılan: açık).

enctype Gönderilen verilerin kodlamasını belirtir (varsayılan: url-kodludur).

method Form gönderirken kullanılan HTTP yöntemini belirtir (varsayılan: GET).

name Formu tanımlamak için kullanılan bir adı belirtir (DOM kullanımı için: document.forms.name).

novalidate Tarayıcının formun geçerliliğini doğrulamayacağını belirtir.

target Eylem özniteliğindeki adresin hedefini belirtir (varsayılan: _self).


< form action="#" method="post">......</form>


Form Elemanlari

< input> Bir giriş denetimini tanımlar

< textarea> Çok satırlı bir giriş kontrolü (metin alanı) tanımlar

< label> <Input> öğesi için bir etiket tanımlar

< fieldset> Bir formdaki ilgili elemanları gruplar

< legend> Bir <fieldset> öğesi için bir başlık tanımlar.

< select> Açılır listeyi tanımlar

< optgroup> Açılır listede ilgili seçenek gruplarını tanımlar

< option> Açılır listeden bir seçeneği tanımlar

< button> Tıklanabilir bir düğmeyi tanımlar

< datalist> Giriş kontrolleri için önceden tanımlanmış seçeneklerin bir listesini belirtir.

< output> Bir hesaplamanın sonucunu tanımlar.


En önemli form öğesi <input> öğesidir.

< Input> öğesi, type özniteliğine bağlı olarak çeşitli şekillerde görüntülenebilir .

< input name="isim" type="text">

< Select> öğesi tanımlar açılır listeyi :

< select name="araba>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

< /select>


< Option> elemanlar seçilebilir bir seçenek tanımlar.

Varsayılan olarak, açılır listedeki ilk öğe seçilir.

Önceden seçilmiş bir seçeneği tanımlamak için, selected nitelikleri seçeneğe ekleyin :

< option value="fiat" selected>Fiat</option>

Görünür değerlerin sayısını belirlemek için size özniteliğini kullanın :

< select name="araba" size="3">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

< /select>


Kullanıcının birden fazla değeri seçmesine izin vermek için multiple özniteliğini kullanın :

< select name="cars" size="4" multiple>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

< /select>



< textarea> elemanı multi çizgi giriş alanı (tanımlayan bir metin alanı ):

< textarea name="mesaj" rows="10" cols="30">

Mesaj Yazınız.

< /textarea>

Cols özellik bir metin alanının görünür genişliğini belirtir.

CSS'yi kullanarak metin alanının boyutunu da tanımlayabilirsiniz:

< textarea name="mesaj" style="width:200px; height:600px">

Mesaj Yazınız.

< /textarea>

< button> eleman tıklanabilir tanımlar düğmesi :

< button type="button" onclick="alert('Hello World!')">Tikla!</button>

< Datalist> öğesi bir <input> elemanı için önceden tanımlanmış seçenekler listesini belirtir.

Kullanıcılar, veri girdikleri sırada önceden tanımlanmış seçeneklerin açılır listelerini görürler.

list <input> elemanının niteliği, başvurmalıdır id <datalist> öğesinin öznitelik.

< form action="/action_page.php">

<input list="Tarayıcı">

< datalist id="Tarayıcı">

< option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

< /form>


< output> öğesi, bir hesaplamanın sonucunu temsil eder (bir komut dosyası tarafından gerçekleştirilen gibi).

Bir hesaplama yapın ve sonucu bir <output> öğesinde gösterin:

< form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0

<input type="range" id="a" name="a" value="50">

100 +

<input type="number" id="b" name="b" value="50">

=

<output name="x" for="a b"></output>

<br><br>

<input type="submit">

< /form>