web dersleri - FORMLAR

FORMLAR

Formlar <form>. . . </form> etiketleri arasında oluşturulur. Formlar düğmeler ve yazım alanlarından(kutulardan) oluşur.Yazım alanlarına(kutularına) yazılan bilgiler düğmeler kullanırak bu bilgilerin işleneceği dosyalara gönderilir.

Yazım kutularının şablon aşağıdadır;

<input type="........."     size="..........."    name="........."    value=".........."  maxlength="........" >

Yukarıdaki type' nin karşısındaki noktalı boşluğa yazım kutusunun tip' i yazılır.
type' nin karşısındaki noktalı boşluğa aşağıdaki değerler atanabilir.

type="text" : Tek satırlık bir yazım alanı açar.
type="checkbox" : Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
type="radio" : Tek seçenekli bir sorunun tek yanıtı alınır.
type="submit" : formu action'la belirtilen dosyaya yönlendiren bir buton yaratır.
type="reset" :Bu butona basınca form boş hale gelir
type="password" : Bir password alanı olusturur. Buraya girilen her karakter * şeklinde görünür
maxlength=".............." : text    ve   password yazım kutularına en fazla kaç karekter girileceğini
belirler.

checked=" on"     :   radio ve checkbox düğmelerin seçili olduğunu gösterir

size="........" Yukarıdaki size'in karşısındaki noktalı boşluğa kutunun uzunluğu yazılır.text ve password 'da    karekter cinsindendir. Diğerlerinde pixel cinsindendir

1. Tek satır yazım alanı oluşturmak;
a.Yazı sınırlaması olmayan yazım kutusu oluşturmak.

Giriş tipi: text
Giriş kutusunun genişliği: 50 karekter
Yazı sınırlaması: yok

Yazılım;

<input type="text" size="50">

Web sayfasındaki görünümü;

Açıklama:Yukarıda 50 karekter genişliğinde yazım kutusu oluşturuldu.İçine sınırsız yazım yapılabilir.

b.Yazı sınrlaması olan yazım kutusu oluşturak.

Giriş tipi: text
Giriş kutusunun genişliği: 50 karekter
Yazı sınırlaması: 30 karekter.Yani maxlength="30" olur.

Yazılım;

<input type="text" size="50" maxlength="30">

Web sayfasındaki görünümü;

Açıklama:Yukarıdaki yazım kutusuna 30 karekterden fazla yazı yazılamaz..

2. Tek seçenekli soruya cevap alanı oluşturmak;

Yazılım;

<input type="radio" name="cins" value="kız"> KIZ   <br>

<input type="radio" name="cins" value="erkek"> ERKEK

Web sayfasındaki görünümü;

KIZ
ERKEK

Açıklama:Yukarıdaki KIZ önündeki çembere tıklanınca ; cins isimli değikene kız değeri atanır.
Yukarıdaki ERKEK önündeki çembere tıklanınca;cins isimli değişkene erkek değeri atanır.

3.Çok seçenekli bir sorunun bir veya birden çok yanıtını almak için form oluşturmak.

Yazılım;

HOBİLER<br>
<input type="checkbox" name="resim hobisi"> RESİM <br>
<input type="checkbox"   name="müzik hobisi"> MÜZİK <br>
<input type="checkbox" neme="satranç hobisi"> SATRANÇ

Web sayfasındaki görünümü;

HOBİLER
RESİM
MÜZİK
SATRANÇ

4. Şifre alanı oluşturmak

a.Şifrede karekter sınırlaması yok;

Yazılım;

<input type="password"  size="15">ŞİFRE

Web sayfasındaki görünümü;

ŞİFRE

Açıklama:Yukarıda genişliği  15 karekter olan şifre kutusu oluşturulmuştur.
b.Şifrede karekter sınırlaması var.

Örnek olarak şifre 7 karekterden fazla olmasın.Yani maxlength değeri 7 olacak.

Yazılım;

<input type="password" size="15" maxlength="7">ŞİFRE

Web sayfasındaki görünümü;

ŞİFRE

Açıklama:Yukarıdaki kutuya 7 karekterden fazla şifre yazılamaz.

5. Tek seçimli   form oluşturmak.

Select ve option terimleri ile yapılır.

BMW,MERCEDES,ROLS ROLCE,PORCHE ve TOYOTA  araba grubundan seçimli bir liste
oluşturalım.Bu listeden seçilen araba otomobil isimli bir değikene gönderilsin.

Yazılım;

<select  name="otombil">

<option>BMW</option>

<option>MERCEDES</option>

<option>ROLS ROLCE</option>

<option>PORCHE</option>

<option>TOYOTA</option>

</select>

Web sayfasındaki görünümü;

6.Çok satırlı yazım kutusu oluşturmak.
Şablon aşağıdadır;

<textarea rows="........"   cols=".........."></textarea>

Şablonda rows yazım kutusunun yüksekliğini,cols yazım kutusunun genişliğini belirler.
Aşağıda  yüksekliği  10 satır ve genişliği 30 colon olan kutu oluşturalım.

Yazılım;

<textarea rows="10"   cols="30"></textarea>

Web sayfasındaki görünümü;

7.      submit buton

Bu buton formu action' la belirtilen adrese yönlendirir.
Yazılım;

<input type="submit">

Web sayfasındaki görünümü;

8. reset buton

Bu buton formu temizler(sıfırlar).

Yazılım;

<input type="reset">

Web sayfasındaki görünümü;

9. Dosya seçim formu.

<Yazılım;

<input type="file">

Web sayfasındaki görünümü;

10.    <button   name="......"   type="......"   value="......."></button>   şablonu ile düğme oluşturma.

submit düğmesi oluşturalım;

Yazılım;

<button   name="submit"   type="submit"   value="submit">     </button>

Web sayfasındaki görünüm;

submit düğmesine resim ve yazı ekleme;

Aşağıdaki resmin adresi ; https://img.webme.com/pic/w/web-sitesi-kurma-dersleri/ddd.jpg

Yukarıdaki resmi ve   GÖNDER yazısını submit düğmesine ekleyelim.

Şablon;

<button name="submit" type="submit" value="submit"><img   width="........ " height="......"
src="............................................................................." >  ............... </button>

Yukarıdaki şablona aşağıdaki verileri atayalım;

resim genişliği(width)=70 pixel
resim yüksekliği(height)=70 pixel
resim adresi(src)= https://img.webme.com/pic/w/web-sitesi-kurma-dersleri/ddd.jpg
yazı(şablondaki son noktalı alan)=GÖNDER

Yazılım;

<button name="submit" type="submit" value="submit"><img   width="70" height="70"
src="https://img.webme.com/pic/w/web-sitesi-kurma-dersleri/ddd.jpg" />GÖNDER</button>

Web sayfasındaki görünüm;

11.Resimli ve yazılı reset düğmesi yapalım.

reset düğmesine resim ve yazı ekleme;

Aşağıdaki resmin adresi ; https://img.webme.com/pic/w/web-sitesi-kurma-dersleri/ddd.jpg

Yukarıdaki resmi ve   SİL yazısını reset düğmesine ekleyelim.

Şablon;

<button name="reset" type="reset" value="reset"><img   width="........ " height="......"
src="............................................................................." >  ............... </button>

Yukarıdaki şablona aşağıdaki verileri atayalım;

resim genişliği(width)=70 pixel
resim yüksekliği(height)=70 pixel
resim adresi(src)= https://img.webme.com/pic/w/web-sitesi-kurma-dersleri/ddd.jpg
yazı(şablondaki son noktalı alan)=SİL

Yazılım;

<button name="reset" type="reset" value="reset"><img   width="70" height="70"
src="https://img.webme.com/pic/w/web-sitesi-kurma-dersleri/ddd.jpg" />SİL</button>

Web sayfasındaki görünüm;

12.   hidden

13.Çok seçimli form oluşturmak;

Şablon;

<select  name="......."     multible >

<optgroup    label="........">
<option>.............</option>
<option>.............</option>
<option>..............</option>
</optgroup>

<optgroup    label="........">
<option>.............</option>
<option>.............</option>
<option>..............</option>
</optgroup>

<optgroup    label="........">
<option>.............</option>
<option>.............</option>
<option>..............</option>
</optgroup>

</select>

Aşağıda bir lokanta   MENÜ sünün yazılımı vardır.MENÜ ; ÇORBALAR ;YEMEKLER   ve

TATLILAR isimli gruplardan oluşuyor.

Yazılım;

<select name="MENÜ"    multiple   >

    <optgroup label="ÇORBALAR">
    <option >Tarhana</option>
    <option >Ezogelin</option>
    <option >İşkembe</option>
</optgroup>

<optgroup label="YEMEKLER">
    <option >İmambayıldı</option>
    <option ">Sultanbeğendi</option>
    <option ">Kadınbudu</option>
</optgroup>

<optgroup label="TATLILAR">
    <option >Kazandibi</option>
    <option >Tavukgöğsü</option>
    <option >Keşkül</option>
</optgroup>
</select>

Yazılımın web sayfasındaki görünümü.

14.    fieldset ve legend

fieldset form elamanları grublandırılır.legend ile gruplara başlık yazılır.

Şablon aşağıdaki ibidir;

<fieldset>

<legend>..............................................</legend>

...................................................................................
....................................................................................
...................................................................................

</fieldset>

<fieldset>

<legend>..............................................</legend>

...................................................................................
....................................................................................
...................................................................................

</fieldset>

<fieldset>

<legend>..............................................</legend>

...................................................................................
....................................................................................
...................................................................................

</fieldset>

Örnek;

Yazılım;

<fieldset>

<legend>KİŞİSEL BİLGİLER</legend>

AD :<input type="text" name="isim"><br/ >
SOYAD:<input type="text" name="soyad"><br/>
OKUL:<input type="text" name="okul">

</fieldset>

<fieldset>

<legend>HOBİLER</legend>

<input type="checkbox" name="resim hobisi"> RESİM <br>
<input type="checkbox"   name="müzik hobisi"> MÜZİK <br>
<input type="checkbox" neme="satranç hobisi"> SATRANÇ

</fieldset>

Yazılımın web sayfasındaki görünümü;

KİŞİSEL BİLGİLERAD :
SOYAD:
OKUL:

HOBİLER RESİM
MÜZİK
SATRANÇ