HTML Form Elemanları

Bu bölümde tüm HTML form elementleri anlatılacaktır.

<input> elementi

En önemli form elementi <input> elementi.

<input> elementi farklı type Öznitelik, çeşitli formlarda değişebilir.

Açıklama:Sonraki bölümde tüm HTML girdi türleri anlatılacaktır.

<select> elementi (açılır liste)

<select> Elementi tanımlarAçılır liste:

Örnek

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Kişisel olarak deneyin

<option> Element, seçilecek seçenekleri tanımlar.

Listeler genellikle ilk seçeneği seçili olarak gösterir.

Selected özniteliği ekleyerek önceden tanımlanmış seçenekleri tanımlayabilirsiniz.

Örnek

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

Kişisel olarak deneyin

<textarea> elementi

<textarea> Element, çok satırlı girdi alanını tanımlar (Metin alanı）：

Örnek

<textarea name="message" rows="10" cols="30">
Kedi bahçede oynuyordu.
</textarea>

Kişisel olarak deneyin

Yukarıdaki HTML kodu tarayıcıda şu şekilde görüntülenir:

Kedi bahçede oynuyordu.

<button> Elementi

<button> Elementi tıklanabilirDüğme:

Örnek

<button type="button" onclick="alert('Hello World!')">Bana Tıkla!</button>

Kişisel olarak deneyin

Yukarıdaki HTML kodu tarayıcıda şu şekilde görüntülenir:

HTML5 Form Elementleri

HTML5 aşağıdaki form elementlerini ekledi:

  • <datalist>
  • <keygen>
  • <output>

Açıklama:Öntanımlı olarak, tarayıcı bilinmeyen elementleri göstermez. Yeni elementler sayfanızı bozmayacaktır.

HTML5 <datalist> Elementi

<datalist> elementi, <input> elementine ön tanımlı seçenek listesi tanımlar.

Kullanıcı, verilerini girdikleri sırasında ön tanımlı seçeneklerin aşağıdakı listesini görecektir.

elementinin list Özellik, <datalist> elementinin id Özellikler.

Örnek

<datalist> ile ön tanımlı değerleri ayarlayan <input> elementi:

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

Kişisel olarak deneyin