HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html form elemanlarını hizalamak
html form elemanları nelerdir
html form elements list
html form elements button
html radio button kullanımı
html radio button
html radio button selected
html radio buttons
html radio button list
html option button group
html option button selected
html option button code
html checkboxes form
html checkboxes group
html checkboxes list
html checkboxes example
html checkboxes buttons
html checkbox kullanımı
html checkbox kodu
html checkbox control
html password box code
html password input box
html form password box
html açılır liste örnekleri
html açılır menü yapımı
html temizleme butonu
html form temizle butonu
html reset button form
html reset buttons
html submit button size

HTML Form Elemanları(Form Elements)

HTML Form Elemanları(Form Elements)
Html
<form>


Cinsiyetiniz:<br>    


<input type="radio" name="cinsiyet" value="Erkek">Erkek<br>


<input type="radio" name="cinsiyet" value="Kadın">Kadın<br><br>


  


Sevdiğiniz Evcil Hayvanlar ?<br>


<input type="checkbox" name="evcilhayvan" value="Kedi">Kediler<br>


<input type="checkbox" name="evcilhayvan" value="Kopek">Köpekler<br>


<input type="checkbox" name="evcilhayvan" value="Kus">Kuşlar<br><br>


  


<input type="checkbox" name="kabul" value="kabulmu">


Yukardaki bilgilerin doğru ve bana ait olduğunu kabul ediyorum.


  


<textarea name="mesaj_kutusu" rows="10" cols="22">


Merhaba,


Siteniz çok güzel bir amaca hizmet ediyor. Sizin sayenizde çok şey öğrendim.


Teşekkür Eder Başarılarınızın Devamını Dilerim..


</textarea>


<br>  


  <select name="Sehir">


    <option value="0">------</option>


    <option value="1">Adana</option>


    <option value="2">Adıyaman</option>


    <option value="3">Afyonkarahisar</option>


    <option value="4">Ağrı</option>


    <option value="5">Amasya</option>


    <option value="6">Ankara</option>


    <option value="7">Antalya</option>


    <option value="8">Artvin</option>


    <option value="9">Aydın</option>


    <option value="10">Balıkesir</option>


    <option value="11">Bilecik</option>


    <option value="12">Bingöl</option>


    <option value="13">Bitlis</option>


    <option value="14">Bolu</option>


    <option value="15">Burdur</option>    


    <option value="16">Bursa</option>


    <option value="17">Çanakkale</option>


    <option value="18">Çankırı</option>


    <option value="19">Çorum</option>


    <option value="20">Denizli</option>


    <option value="21">Diyarbakır</option>


    <option value="22">Edirne</option>


    <option value="23">Elazığ</option>


    <option value="24">Erzincan</option>


    <option value="25">Erzurum</option>


    <option value="26">Eskişehir</option>


    <option value="27">Gaziantep</option>


    <option value="28">Giresun</option>


    <option value="29">Gümüşhane</option>


    <option value="30">Hakkâri</option>


    <option value="31">Hatay</option>


    <option value="32">Isparta</option>


    <option value="33">Mersin</option>


    <option value="34">İstanbul</option>


    <option value="35">İzmir</option>


    <option value="36">Kars</option>


    <option value="37">Kastamonu</option>


    <option value="38">Kayseri</option>


    <option value="39">Kırklareli</option>


    <option value="40">Kırşehir</option>


    <option value="41">Kocaeli</option>


    <option value="42">Konya</option>


    <option value="43">Kütahya</option>


    <option value="44">Malatya</option>


    <option value="45">Manisa</option>


    <option value="46">Kahramanmaraş</option>


    <option value="47">Mardin</option>


    <option value="48">Muğla</option>


    <option value="49">Muş</option>


    <option value="50">Nevşehir</option>


    <option value="51">Niğde</option>


    <option value="52">Ordu</option>


    <option value="53">Rize</option>


    <option value="54">Sakarya</option>


    <option value="55">Samsun</option>


    <option value="56">Siirt</option>


    <option value="57">Sinop</option>


    <option value="58">Sivas</option>


    <option value="59">Tekirdağ</option>


    <option value="60">Tokat</option>


    <option value="61">Trabzon</option>


    <option value="62">Tunceli</option>


    <option value="63">Şanlıurfa</option>   


    <option value="64">Uşak</option>


    <option value="65">Van</option>


    <option value="66">Yozgat</option>


    <option value="67">Zonguldak</option>    


    <option value="68">Aksaray</option>


    <option value="69">Bayburt</option>


    <option value="70">Karaman</option>


    <option value="71">Kırıkkale</option>


    <option value="72">Batman</option>


    <option value="73">Şırnak</option>


    <option value="74">Bartın</option>


    <option value="75">Ardahan</option>


    <option value="76">Iğdır</option>


    <option value="77">Yalova</option>


    <option value="78">Karabük</option>


    <option value="79">Kilis</option>


    <option value="80">Osmaniye</option>


    <option value="81">Düzce</option>


</select>


</form>


<form>


  Kullanıcı Adı:<br>


  <input type="text" name="kullanici_adi"><br>


  Şifre:<br>


  <input type="password" name="sifre"><br><br>


  <input type="reset" value="Temizle">


  <input type="submit" value="Gönder">


</form>

Formların devamı olan bu dersimizde form elemanlarını ayrıntılı olarak görüceğiz.Hemen başlayalım;

1-Seçenek Butonları (Radio Butonları)

Bir yere internet üzerinden kayıt olurken sizden birçok bilgi girmenizi isterler. Bu bilgiler arasında cinsiyetiniz vardır ve size yuvarlak kutucuklar verirler, birini seçmenizi isterler ama siz ola ki iki kutu işaretlemeye çalışırsanız, sonradan işaretlediğiniz kutu işaretlenecek ve önceden işaretlediğinizdeki işaret kaldırılacak. Bunu kod editöründen görebilirsiniz buraya da yazayım.

Not: Bir form elemanı bile kullansanız mutlaka <form> etiketi kullanmayı unutmayınız.

Kullanımı

<form>


  <input type="radio" name="cinsiyet" value="Erkek">Erkek<br>


  <input type="radio" name="cinsiyet" value="Kadın">Kadın<br>


</form>

2-Kontrol Kutuları (Checkboxes)

Bu kutular ile kullanıcıdan birden fazla bilgiye sahip olup olmadığını anlamamızı sağlayan elemanlardır.Bunu grup olarak kullanabilir yada bir konu hakkında ziyaretçiden onay verip vermediğini anlamak için kullanırız.

Kullanımı:

<form>


Sevdiğiniz Evcil Hayvanlar ?


  <input type="checkbox" name="evcilhayvan" value="Kedi">Kediler<br>


  <input type="checkbox" name="evcilhayvan" value="Kopek">Köpekler<br>


  <input type="checkbox" name="evcilhayvan" value="Kus">Kuşlar<br>


</form>

Yine aynı şekilde grup elemanı oldukları için name değerleri aynı. Şimdi de tek olarak kullanalım.

Kullanımı:

<form>


<input type="checkbox" name="kabul" value="kabulmu">


Yukardaki bilgilerin doğru ve bana ait olduğunu kabul ediyorum.


</form>

Formun en sonunda genelde yukarıdaki ifadeye benzer bir ifade kullanılır. Form gönderilmeden name değeri "kabul" olan checkbox girişinin işaretlenip işaretlenmediği kontrol ettirilir. Bu genelde Javascript dili ile olur. Bu da başka bir dildir ve azda olsa biraz öğrenmenizi tavsiye ederim. Kontrol edildikten sonra eğer işaretlenmedi ise kullanıcıya uyarı verilir ve ona "Lütfen şartları kabul ediniz!" gibi kabul edene kadar form gönderilmez.

3- Şifre Kutuları(Password Kutuları)

Eğer sitenize bir üyelik paneli oluşturursanız, kullanıcının üyelik paneline girmesi için kullanıcı adı ve şifre bilgilerini kullanmanız gerekir. Kullanıcı adı kutusu normal text kutusu olabilir fakat şifre kutusunun gizli olması gerek. Bu aynı normal text tipindeki <input> parametresi gibi tek yapmanız gereken "type" parametresini "password" değeri belirtmelisiniz. Bir örnek yapalım..

Kullanımı:

<form>


  Kullanıcı Adı:<br>


  <input type="text" name="kullanici_adi"><br>


  Şifre:<br>


  <input type="password" name="sifre">


</form>

4-Açılır Liste(Drop-Down List)

Ziyaretçilere çok seçenek sunup bir tanesini seçmesini istediğinizde kullanılır. Mesela "Doğum Yeriniz Neresi ?" diye sorup 81 tane ili açılır şekilde gösterip bir tanesini seçmesini sağlayabiliriz.

Kullanımı:

<select name="Sehir">


    <option value="0">------</option>


    <option value="1">Adana</option>


    <option value="2">Adıyaman</option>


    <option value="3">Afyonkarahisar</option>


    <option value="4">Ağrı</option>


    <option value="5">Amasya</option>


    <option value="6">Ankara</option>


    <option value="7">Antalya</option>


    <option value="8">Artvin</option>


    <option value="9">Aydın</option>


    <option value="10">Balıkesir</option>


    <option value="11">Bilecik</option>


    <option value="12">Bingöl</option>


    <option value="13">Bitlis</option>


    <option value="14">Bolu</option>


    <option value="15">Burdur</option>


    <option value="16">Bursa</option>


    <option value="17">Çanakkale</option>


    <option value="18">Çankırı</option>


    <option value="19">Çorum</option>


    <option value="20">Denizli</option>


    <option value="21">Diyarbakır</option>


    <option value="22">Edirne</option>


    <option value="23">Elazığ</option>


    <option value="24">Erzincan</option>


    <option value="25">Erzurum</option>


    <option value="26">Eskişehir</option>


    <option value="27">Gaziantep</option>


    <option value="28">Giresun</option>


    <option value="29">Gümüşhane</option>


    <option value="30">Hakkâri</option>


    <option value="31">Hatay</option>


    <option value="32">Isparta</option>


    <option value="33">Mersin</option>


    <option value="34">İstanbul</option>


    <option value="35">İzmir</option>


    <option value="36">Kars</option>


    <option value="37">Kastamonu</option>


    <option value="38">Kayseri</option>


    <option value="39">Kırklareli</option>


    <option value="40">Kırşehir</option>


    <option value="41">Kocaeli</option>


    <option value="42">Konya</option>


    <option value="43">Kütahya</option>


    <option value="44">Malatya</option>


    <option value="45">Manisa</option>


    <option value="46">Kahramanmaraş</option>


    <option value="47">Mardin</option>


    <option value="48">Muğla</option>


    <option value="49">Muş</option>


    <option value="50">Nevşehir</option>


    <option value="51">Niğde</option>


    <option value="52">Ordu</option>


    <option value="53">Rize</option>


    <option value="54">Sakarya</option>


    <option value="55">Samsun</option>


    <option value="56">Siirt</option>


    <option value="57">Sinop</option>


    <option value="58">Sivas</option>


    <option value="59">Tekirdağ</option>


    <option value="60">Tokat</option>


    <option value="61">Trabzon</option>


    <option value="62">Tunceli</option>


    <option value="63">Şanlıurfa</option>


    <option value="64">Uşak</option>


    <option value="65">Van</option>


    <option value="66">Yozgat</option>


    <option value="67">Zonguldak</option>


    <option value="68">Aksaray</option>


    <option value="69">Bayburt</option>


    <option value="70">Karaman</option>


    <option value="71">Kırıkkale</option>


    <option value="72">Batman</option>


    <option value="73">Şırnak</option>


    <option value="74">Bartın</option>


    <option value="75">Ardahan</option>


    <option value="76">Iğdır</option>


    <option value="77">Yalova</option>


    <option value="78">Karabük</option>


    <option value="79">Kilis</option>


    <option value="80">Osmaniye</option>


    <option value="81">Düzce</option>


</select>

5- Mesaj Kutuları (Textarea)

Form sayfalarında büyük yazı kutuları olduğunu görmüşsünüzdür. Bu kutuların büyük çoğunluğu mesaj yazmak için kullanılır. Bu mesajlar uzun olduğu için ziyaretçinin hepsini aynı anda görebilmesi için tek satırlık kutular yerine çok satırlık kutudan yararlanırız.

<textarea> Parametreleri

name: Geçerli etiketi daha sonradan diğerlerinden ayırt etmek için kullanılır. Bu yüzden de ona özel bir değer verilmelidir(Ör:Mesaj_Kutusu).

rows: Mesaj kutusunun kaç satır büyüklüğünde olucağını sayı ile belirterek kullanılır.

cols: Mesaj kutusunun kaç sütun büyüklüğünde olacağını sayı ile belirterek kullanılır.

Kullanımı:

<textarea name="mesaj_kutusu" rows="10" cols="22">


Merhaba,


Siteniz çok güzel bir amaca hizmet ediyor. Sizin sayenizde çok şey


öğrendim.


Teşekkür Eder Başarılarınızın Devamını Dilerim..


</textarea>

6- Temizle Butonu (Reset Button)

Eskisi kadar pek kullanılmasa da yinede size göstermek istiyorum. Yine <input> etiketinin type parametresine reset değeri belirtiyoruz.

Kullanımı:

<form>


    <input type="reset" value="Temizle">


</form

7-Gönder-Kaydet Butonu (Submit Button)

Doldurulan her form için gönderilmek üzere bir gönder butonu vardır. Bu buton ile form içindeki veriler düzenli bir şekilde ilgili sayfaya gönderilir. Gönderilme kısmını bir önceki derste bahsetmiştim bakmanızı tavsiye ederim.

Kullanımı:

<form>


    <input type="submit" value="Gönder">


</form>


Paylaş:

Enes KILIÇ
Webmaster