İnternet Programlama-I

... konulu sunumlar: "İnternet Programlama-I"— Sunum transkripti:

1 İnternet Programlama-I
HTML - FORMLAR

2 HTML FORMLARI Formlar ziyaretçilerden bilgi almak için kullanılan HTML elemanlarından biridir. Formları <form>…………</form> tagları arasında oluştururuz. Formlar, ziyaretçilerin belirtilen alanları doldurup gönder düğmesine basmaları ile bilgilerin gönderilmesi esasına göre çalışır. Form bilgilerinin bize ulaşmasını php, asp, perl/cgi gibi diller sağlar. Yani formları kullanabilmek için bu dillerden en az biri hakkında bilginiz olması lazım.

3 Form Elemanları <input> elemanın aldığı özellikler;
Form oluştururken <form> </form> tagları arasında <input> elemanını kullanırız. Bu elemanın kapanış etiketi(/input) yoktur. <input> elemanın aldığı özellikler; <form> <input type=“xxx“ name="yyy“ value="zzz“ size="13“> </form> type = Form öğesinin ne olduğunu belirtir.(metin kutusu,onay düğmesi ,vb.) name = Oluşturduğumuz öğenin adını belirtir. value = Eğer değer vermek istersek kullanırız. size = Form öğesinin karakter uzunluğunu belirtir. Bunların dışında "maxlength“ öğesi kullanılarak metin kutusunun maximum uzunluğu belirlenebilir. Ayrıca her zaman "value", "maxlength", "size”gibi öğelerini kullanmak zorunda değiliz.

4 <input> elemanında "type” öğesinin aldığı değerler;
Text (metin kutusu) Password (parola alanı) Radio (radyo düğmesi) Checkbox (onay kutusu) Button (düğme) Submit (onay düğmesi) Reset (reset düğmesi) File (dosya gönderme) Bu değerler dışında <input> elemanı ile kullanılmayan değerler de vardır.Bunlar; Textarea (metin alanı) : Kullanımı(<textarea>…...</textarea>) Select (menü) : Kullanımı(<select>……</select>)

5 Text (Metin Kutusu) Yaratmak
<form> Ad : <input type="text” name="ad" value="Adınız“> Soyad : <input type="text” name="soyad" value="Soyadınız“> </form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir. "value” elemanını kullanmasaydık kutucuklar boş olacaktı

6 Password (Parola Alanı) Yaratmak
<form> Kullanıcı Adı : <input type="text" name="ad” > <br> Parola : <input type="password” name="sifre”> </form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir. Parola alanına yazdığınız yazılar ****** şeklinde gözükecektir.

7 Textarea (Metin Alanı) Yaratmak
<form><pre> Kullanıcı Adı : <input type="text" name="ad"> <br> Parola : <input type="password" name="sifre"> <br></pre> Düşünceler :<br></pre> <textarea name="dusunceler" rows="3" cols="40"> Site Hakkındaki Görüşlerinizi Yazınız...</textarea> </form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir. "rows" dikey olarak , "cols" ise yatay olarak textarea (metin alanı)’nın büyüklüğünü gösterir. <textarea> </textarea> arasında kalan kısımda yazdıklarımız ise “value” elemanının yaptığı işi yapar.

8 Radio Buton(Radyo Düğmesi) Yaratmak
<form><pre> Adınız : <input type="text" name="ad“> <br> Soyadınız : <input type="text" name="soyad“> <br></pre> Cinsiyetiniz : <input type=“radio” name=“radyo“ checked>Erkek <input type=“radio” name=“radyo“>Kadın </form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir. "name“ elemanı dikkat ettiyseniz iki radio düğmesinde de aynı değeri almış. Eğer farklı olsalardı aynı anda iki radio düğmesi de seçilebilirdi. Daha iyi anlamak için "name“ değerlerini aynı yapıp deneyin. Sonra farklı yapıp deneyin sonucu göreceksiniz. Ayrıca örneğimizde birinci radio düğmesinde "checked” elemanını kullandık. Bu eleman kullanıldığı radio düğmesini seçili hale getirir. Örneğimizde de bu birinci radio düğmesi oldu.

9 CheckBox (Onay Kutucusu) Yaratmak
<form><pre> Kullanıcı Adınız : <input type="text" name="ad3" size=“40“><br> Mail Adresiniz : <input type="text" name="soyad3“ size="30“><br> Yeni Haberleri Mail ile Gönder : </pre> <input type="checkbox” name=“cb“ checked> </form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir. "checked” elemanı ile onay kutumuzu seçili hale getirdik.

10 Select Menü(Menü Kutusu) Yaratmak
<form><pre> Kullanıcı Adı : <input type="text" name="kulladi3"><br> Sisteminiz : <select name="menu" size="1"> <option value="on">Linux</option> <option value="on“ selected>Windows</option> <option value="on">Macintosh</option> </select></pre> </form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir. Menü yaratırken <input> elemanını kullanmıyoruz. Menülerimizi <select>…</select> elemanları arasında oluşturuyoruz. name ile menümüzü isimlendiriyoruz, size ile menümüzün yüksekliğini belirliyoruz. <option>…</option> ise menümüzde bulunacak elemanları bulunduruyor. value ile bu elemanlara değer veriyoruz. Dikkat ettiyseniz hazırladığımız menünün ikinci seçeneği seçili halde ekrana geliyor, bunu menümüzün ikinci seçeneğindeki selected ile sağlıyoruz.

11 Birde “size” elemanına değer olarak "3“ vererek menümüzün nasıl göründüğünü inceleyelim. <form><pre> Kullanıcı Adı : <input type="text" name="kulladi4"><br> İşletim Sistemi : <select name="menu" size="3" multiple> <option value="on">Windows-98</option> <option value="on">Windows-2000</option> <option value="on">Windows-XP</option> <option value="on">MacOsX</option> <option value="on">Pardus</option> </select></pre> </form> <select>…</select> elemanları arasında kullandığımız multiple sayesinde yaptığımız menüde birden fazla seçenek seçebiliyoruz.

12 File Upload (Dosya Yüklemek) Etmek
<form><pre> Adınız : <input type="text" name="ad1“> <br> Dosyanız : <input type="file” name="dosya“> </pre></form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir.

13 Submit Button (Gönder Düğmesi) Yaratmak
<form> <p align="center"> Adınız : <input type="text" name="ad2"><br> Yaşınız :<input type="text" name="soyad2"><br> <input type="submit" name="dugme" value="Gönder"> </p> </form> Hazırladığınız form tarayıcınızda aşağıdaki gibi gözükecektir. Oluşturduğumuz düğme doldurulan form bilgilerini göndermek içindir. value değeri düğmenin üstünde yazıcak yazıyı belirler

14 Submit Button için düğme yerine resim de kullanabiliriz
Submit Button için düğme yerine resim de kullanabiliriz. Yani seçtiğimiz resme tıklayınca form gönderilir. <pre><form> <p align=<"center"> Adınız : <input type="text" name="ad2"><br> Yaşınız : <input type="text" name="soyad2"><br> <input type="image" name="dugme"> </p> </form></pre>

15 Reset Button (Sil Düğmesi) Yaratmak
<pre><form> <p align=<"center"> Adınız : <input type="text" name="ad2"><br> Yaşınız : <input type="text" name="soyad2"><br> <input type="reset" name="dugme" value="Vazgeç"> </p></form></pre> Oluşturduğumuz düğme doldurulan form bilgilerini temizlemek içindir. value değeri düğmenin üstünde yazıcak yazıyı belirler.

16 <input> yerine <button> tag ını kullanarakta buton tasarlayabiliriz. Reset butonu için bir düğme yerine resmi buton olarak kullanmak istersek ; <pre><form> <p align="center"> Adınız : <input type="text" name="ad2"><br> Yaşınız : <input type="text" name="soyad2"><br> <button type="reset"> <img src="image.gif" name="silme" width="45" height="25"> </button> </p> </form></pre>

17 <form> Kullanıcı Adı : <input type="text" name="1"><br> Parola : <input type="password" name="2"><br> Cinsiyetiniz : <input type="radio" name="3" checked>Erkek <input type="radio" name="3">Kadın<br><br> Yaşınız : <select name="menu2" size="1"> <option value="xxx" selected>Seçiniz..</option> <option value="xxx">17</option> <option value="xxx">18</option> <option value="xxx">19</option> <option value="xxx">20</option> <option value="xxx">21</option> </select><br><br>

18 Hobileriniz : <br><input type="checkbox" name="4">Seyahat Etmek<br> <input type="checkbox" name="4">Kitap Okumak<br> <input type="checkbox" name="4">Müzik Dinlemek<br> <input type="checkbox" name="4">Koşu Yapmak<br> <input type="checkbox" name="4">Yüzmek<br><br> Site Hakkındaki Düşünceleriniz :<br> <textarea name="5" rows="5" cols="30"></textarea><br><br> <input type="submit" name="6" value="Gönder"> <input type="reset" name="7" value="Temizle"> </form>

19