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ü)
html5 form select options
html5 form option select
html5 form option list
html5 form options
html5 option form
html5 form autocomplete options
html5 form autocomplete example
form novalidate html5
html5 form novalidate attribute
html5 input text autofocus
html5 input type autofocus
html5 input form template
html5 input form action
html5 form formenctype
html5 form enctype
html5 input novalidate
html5 form formtarget
html5 input text height
html5 input width height
html5 input width
html5 width and height
html5 input min max
html5 input min max step
html5 input multiple select
html5 multiple select
html5 pattern kullanımı
html5 input pattern check
html5 input placeholder text
html5 input required example
html5 input step attribute

HTML Form Özellikleri(Form Properties)

HTML Form Özellikleri(Form Properties)
Html
<form action="kaydet.php" autocomplete="on">


  İsim:<input type="text" name="isim"><br>


  Soyisim: <input type="text" name="soyisim"><br>


  E-mail: <input type="email" name="email" autocomplete="off"><br>


  <input type="submit">


</form>

İşi birazda daha ciddiye alarak formlarımızı daha iyi bir şekilde nasıl kodlanır bu dersimizde bunu göreceğiz. Bu ders size diğerlerinden zor gelebilir ama dikkatli okuyup anlamadığınız yerleri bana yada internete sorabilirsiniz gulucuk

1- <form> / <input> autocomplete Özelliği

Giriş tipini otomatik algılayarak tarayıcı tarafından doldurulmasını sağlar. Bu özellik hem <form> elemanında hemde <input> elemanlarına tanımlayabileceğiniz bir özelliktir. "on" yada "off" şeklinde değer alarak bunu sağlayabilir.Yalnız tabi ki <input> tipini belirtmelisiniz yoksa tarayıcı sizin oraya ne tür bir veri yazdırmak istediğinizi nerden bilsin öyle değil mi gulucuk. Örneğime bakarak daha iyi anlayacaksınız.

Kullanımı:

<form action="kaydet.php" autocomplete="on">


  İsim:<input type="text" name="isim"><br>


  Soyisim: <input type="text" name="soyisim"><br>


  E-mail: <input type="email" name="email" autocomplete="off"><br>


  <input type="submit">


</form>

2-<form> novalidate Özelliği

Gönderileceği zaman, formun doğrulanmadığını belirtir.

Kullanımı:

<form action="kaydet.php" novalidate>


  E-mail: <input type="email" name="user_email">


  <input type="submit">


</form>

3-<input> autofocus Özelliği

Form yüklendiğinde hangi elemanın odaklanacağını seçer. Örneğin bir öğrencinin adı soyadı okul numarası yazan bir form olsun. Öğrenciye ilk önce okul numarasını girmesini isterseniz ona odaklamınız gerekir.

Kullanımı:

<form action="kaydet.php">


  Okul no: <input type="number" name="ogr_no" autofocus><br>


  İsim: <input type="text" name ="ogr_isim"><br>


  Soyisim: <input type="text" name="ogr_soyisim"><br>


  <input type="submit">


</form>

4-<input> form Özelliği

Form elemanlarını her zaman form etiketi arasında yazmanız gerektiğini daha önce görmüştük fakat bazen formun dışında bir form elemanı yazmanız gerebilir. Burada dikkat etmeniz gereken nokta dışarıda bıraktığınız form elemanın hangi forma ait olduğunu gösteren id parametrelerinin aynı olması.

Kullanımı:

<form action="ogrenci_kaydet.php" id="ogrenci_ekle">


  İsim: <input type="text" name="isim"><br>


  <input type="submit" value="Submit">


</form>


Okul no: <input type="text" name="okulno" form="ogrenci_ekle">

5-<input> formaction Özelliği

Bu özellik web programlamaya yeni başladıysanız anlamazı zor olabilir. Bu özellik, bir form gönderildiğinde giriş denetimi işleyecek bir dosyanın URL"'sini belirtir. Formun nereye gideceği <form> elemanı sayesinde belirlenir biz bunu değiştirerek gönder butonuna bu işlevi verebiliriz. Tabi eğer iki buton koyarak birini normal işlevde diğerini bahsettiğim özellik ile birlikte kullanabilirsiniz. Örneğin aşağıda ad soyad girişlerini hem kullanıcılarınızı kaydettiğiniz sayfaya yada yöneticilerinizi kaydettiğiniz sayfaya yönlendirebilirsiniz.

Kullanımı:

<form action="kullanici_kaydet.php">


  İsim: <input type="text" name="isim"><br>


  Soyisim: <input type="text" name="soyisim"><br>


  <input type="submit"><br>


  <input type="submit" formaction="yoneticiler.php"
  value="Yöneticilere Kaydet">


</form>

6-<input> formenctype Özelliği

Form verilerinin sunucuya gönderilirken nasıl şifrelenmesi gerektiğini belirtir. Bu sadece form elemanının "action" parametresine "post" özelliği verdiğimizde işe yarar. Bu özellik ayrıca <form> elemanının enctype özniteliği de geçersiz kılar. <input> elemanımızın "submit" tipindeki özelliğinde kullanılır. Örnekte daha iyi anlayacaksınız.

Kullanımı:

<form action="kaydet.php" method="post">


  İsim: <input type="text" name="isim"><br>


  <input type="submit" value="Submit">


  <input type="submit" formenctype="multipart/form-data"
  value="Gönder Multipart/form-data ile">


</form>

7-<input> formmethod Özelliği

Bu özellik form elemanına atadığınız "method" parametresi var ise onu geçersiz kılmanıza olanak sağlar. Method parametresinin ne işe yaradığınız "Formlar" dersimizde öğrenmiştik.Geçersiz kılınan form elemanı özelliğini yine <input> elemanının "submit" özelliğinde kullanabilirsiniz.

<form action="kaydet.php" method="get">


  İsim: <input type="text" name="isim"><br>


  Soyisim: <input type="text" name="soyisim"><br>


  <input type="submit">


  <input type="submit" formmethod="post" formaction="kaydetpost.php"


  value="Post ile Gönder">


</form>

8-<input> formnovalidate Özelliği

Bu özellik, <input> elementinin doğrulanmaması gerektiğini belirtir. <form> elemanının "novalidate" özelliğini geçersiz kılar. Buda öncekiler gibi opsiyonel aslında istediğiniz iki şekilde kullanabilirsiniz. Aşağıdaki örneğimizde hem doğrulamalı hemde doğrulamasız iki buton ile kullanımını görebilirsiniz.

Kullanımı:

<form action="iletisim.php">


  E-mail: <input type="email" name="eposta_id"><br>


  <input type="submit" value="Submit"><br>


  <input type="submit" formnovalidate value="Doğrulamadan Gönder">


</form>

9-<input> formtarget Özelliği

Bu özellik, form elemanına yazılan target özelliğini devre dışı bırakarak <input> elemanının özelliği olarak yazılarak kullanılır. Görevi ise form gönderildikten sonra alınan cevabın hangi sayfada gösterilmesi gerektiğini belirlemenizi sağlar. Bu da diğer benzerleri gibi opsiyoneldir. Aşağıdaki örnekte biri aynı sayfada cevabı gösterilirken diğer ise yeni bir sekmede aynı cevabı göstermektedir.

Kullanımı

<form action="bilgilerkaydet.php">


  İsim: <input type="text" name="isim"><br>


  Soyisim: <input type="text" name="soyisim"><br>


  <input type="submit" value="Gönder cevabı buraya gelsin">


  <input type="submit" formtarget="_blank"
  value="Gönder cevabı yeni sekmeye gelsin">


</form>

10-<input> height (yükseklik) ve width (genişlik) Özelliği

Bu özellikler, bir <input> elementinin yükseklik ve genişliğini ayarlamanızı sağlar.Sadece <image> elemanında kullanılır. Yükseklik ve genişlik ayarlı ise sayfa yüklendiğinde, görüntü için gerekli alan ayrılmış olacaktır. Ancak bu özellikler olmadan tarayıcı(browser) görüntünün boyutunu bilmediği için buna uygun bir alan ayıramaz.

Kullanımı:

<input type="image" src="gonder.icon" alt="Submit" width="48" height="48">

11-<input> min ve max Özelliği

Bu özellik, bir <input> elementi için minimum ve maksimum değerleri belirtir.Aşağıdaki örnekte gördüğünüz gibi belirli bir tarihten önce,sonra yada ikisininde bir arada kullanıldığı başka bir örnek olan birden beşe kadar bir puan değeri gibi bir şey olmasını sağlayabilirsiniz.

Kullanımı:

01-01-1975\'den önce bi tarih girin:


<input type="date" name="kayıt_tarihi" max="1975-01-01"><br>




14-09-2017\'den sonra bir tarih girin:


<input type="date" name="sınav_tarihi" min="2017-09-14"><br>




100 ile 10 arasında bir değer girin:


<input type="number" name="puan" min="10" max="100">

12-<input> multiple Özelliği

Bu özellik birden çok seçim yapmanızı sağlar, genelde <img> elemanı ile kullanılır.Örneğin sayfanızda tatil için Antalya"'ya gittiniz ve tatil fotoğraflarınızı paylaşmak istiyorsunuz. Hepsini tek tek yüklemek yerine toplu bir şekilde seçip bir kerede yüklemenizi sağlar.

Not: Tabi bunu tam olarak Php ve Asp gibi diller ile yapabilirsiniz.

Kullanımı:

Resimleri seçiniz: <input type="file" name="img" multiple>

13-<input> pattern Özelliği

Bu özellik ile <input> elemanına yapılacak olan girişlerin belirli bir formatta yaptırılmasını sağlar.

<form action="ulkeler.php">


Ülke kodu: <input type="text" name="ulke_kodu" pattern="[A-Za-z]{3}" title="Üç karakterli ülke kodu">


<input type="submit">


</form>

14-<input> placeholder Özelliği

Bu özellik, kullanıcılara kısa bir bilgi vermenizi sağlar.Örneğin telefon numarası girerken başında "0" olmaması gerektiğini anlatmak için bir telefon numarasını anlatan kısa bilgi verebilirsiniz.

Kullanımı:

<input type="tel" name="telno" placeholder="5xxxxxxxxx">

15-<input> required Özelliği

Bu özelliğin kullanıldığı form elemanlarının mutlaka doldurulması gerektiğini belirtmiş olursunuz. Formda boş geçilmesini istemediğiniz <input> elemanlarında bu özelliği kullanmanız gerekir.

<form action="uyeler.kaydet">


Kullanıcı adı: <input type="text" name="kullanici_adi" required><br>


Şifre: <input type="password" name="sifre" required>


<input type="submit">


</form>

16-<input> step Özelliği

Bu özellik ile sayı tipi <input> elemanlarının bu sayı değerlerinin hangi sayının katları şeklinde olması gerektiğini ayarlarsınız.Örneğin aşağıdaki örnekte sayı sıfırdan yüze kadar beşer beşer arttırıp azaltılmasını sağlayan bir puan giriş elemanı oluşturmuştuk olduk.

Puan giriniz: <input type="number" name="puan" step="5" min="0" max="100">


Paylaş:

Enes KILIÇ
Webmaster