Form Oluşturma Html-Web Tasarımı Ve Programlama Ders 6

Trang chủ » Html Kodları Form Oluşturma » Form Oluşturma Html-Web Tasarımı Ve Programlama Ders 6

Có thể bạn quan tâm

Form Oluşturma Html-Web Tasarımı Ve Programlama Ders 6 

Tablo Oluşturma:

Html dilinde formlar <form></form> etiketleri arasına yazılır.

<form action=url method=get-post> </form>

method olarak daha güvenilir olduğu için post kullanılır.

form oluştururken girdi nesneleri eklemek için input kullanıyoruz.Bu kısımda  tipini(type),ismini(name),(size),hizalamasını(align),seçilme(checked)  gibi özellikler kullanılabilir.

Text: Formumuza tek satırlık yazı girdisi eklemek için kulanıyoruz.

Örnek:

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi"><br>

</form>

</body>

</html>

[/csharp]

 

çalıştıralım. 

Button: Düğme eklemek için kullanılır.Düğme üzerinde yazılacak ifadeyi value’den sonra belirtiyoruz.

Örnek : 

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et">

</form>

</body>

</html> [/csharp]

 

 

 

  

Html’de hazırlanmış form örnekleri için link : https://www.gorselprogramlama.com/forum-ornekleri-html-web-tasarim-ve-programlama

2.link : https://www.gorselprogramlama.com/form-ornekleri-2-html-web-tasarim-ve-programlama

Password: Şifre girişi yapılacak durumlarda kullanılır

Ör:

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et">

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

</form>

</body>

</html> [/csharp]

 

 

 

radio: Seçenek eklemek içim kullanılır.Burada dikkat edilmese gereken eğer tek bir tanesi seçilsin istiyorsanız name’lerini aynı yazmalısın.Farklı name verdiğinizde birden fazla seçim gerçekleşebilecektir.

Örnek:

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

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

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

</form>

</body>

</html> [/csharp]

 

 

 

 

Checkbox: Onay kutusu eklemek için kullanılır.Seçili olmasını istiyorsanız checked veya checked=”on” yazmalısınız.(<input type=”checkbox” name=”aa” checked>)

Örnek:

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

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

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro">

</form>

</body>

</html> [/csharp]

 

 

 

Select-option: Açılır menü eklemek için kullanılır.option etiketleri arasına seçeneklerin herbiri yazılır.Seçeneklerin hepsi select etiketleri arasına alınır.Size ile açılır menünün yüksekliğini değiştirebilirsiniz.Birden fazla seçim yapabilmek için multiple’yi kullanın.(<select name=”aa”  multiple>)

Örnek:

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

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

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

</form>

</body>

</html> [/csharp]

 

  

Html’de hazırlanmış form örnekleri için link :  https://www.gorselprogramlama.com/forum-ornekleri-html-web-tasarim-ve-programlama

2.link : https://www.gorselprogramlama.com/form-ornekleri-2-html-web-tasarim-ve-programlama

textarea: Uzun satırlı mesajlar eklemek istediğimiz zaman kulllanılır. cols ile enini , rows ile boyunu piksel olarak ölçülendiririz.Bunda input’u kullanmıyoruz.

Örnek:

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

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

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea>

</form>

</body>

</html> [/csharp]

 

 

 

Submit:Verileri sunucuya yollamak için kullanılır.Value değeri düğme üzerine yazılan metini belirler. 

Reset:Formdaki nesneleri temizlemek için kullanılır.Value değeri düğme üzerine yazılan metini belirler. 

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

Üye Adı:<input type="text" name="textuyeadi">

<input type="button" value="Kontrol Et"><br>

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

Adı:<input type="text" name="textadi"><br>

Soyadı:<input type="text" name="textsoyadi"><br>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

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

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

</form>

</body>

</html> [/csharp]

 

 

 Formumuza dikkat ettiyseniz yazılar ve texler aynı hizada olmadı.Htölde hizalama için tabloları kullanabiliriz.

Mesela 1. satır için  üye adı ,yanındaki text ve buton.bunlar aynı satır ve her biri bir hücre olacak şekilde  tabloyu oluşturuyoruz.Diğerlerine aynı işlemler uygulanır.Kenarlıklar gözükmesin diye border=0 olarak belirtiyoruz.Ben hizalama işlemini ilk 4 satır için yaptım.Bunu diğer satırlarada uygulayabilirsiniz.

Örnek :

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

<table border="0"><tr>

<td>Üye Adı:</td><td><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

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

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

</form>

</body>

</html> [/csharp]

 

 

 

 

Eğer textleri biraz daha sağa hareket ettirmek isterseniz tablonun genişliğini (width) artırabilirsiniz.

Örnek:

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

<table border="0" width=400><tr>

<td>Üye Adı:</td><td><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

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

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

</form>

</body>

</html> [/csharp]

 

 

tablo için border=1 yaparak hizalamanın nasıl yapıldığını gözlemleyebilirsiniz.

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

<table border="1" width=400><tr>

<td>Üye Adı:</td><td><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

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

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

</form>

</body>

</html> [/csharp]

 

Burada  sağa,sola,ortaya hizalama işlemlerini kullanarak formunuza farklı bir görünüm sağlayabilirsiniz.

[csharp]

<html>

<body>

<form action="https://www.gorselprogramlama.com/" method=post>

<table border="1" width=400><tr>

<td>Üye Adı:</td><td align="right"><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

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

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

</form>

</body>

</html> [/csharp]

 

 

fieldset:Forma kenarlık eklemek için kullanılır.

legend: Formadaki çizginin üzerine başlık eklemek için kullanılır.align kullanılarak hizalama(left:sola,center: ortaya,right: sağa) yapılabilir.ör: <legend align=”center”> gibi.

[csharp]

<html>

<body>

<fieldset><legend>Kişi Bilgileri</legend>

<form action="https://www.gorselprogramlama.com/" method=post>

<table border="1" width=400><tr>

<td>Üye Adı:</td><td align="right"><input type="text" name="textuyeadi"></td>

<td><input type="button" value="Kontrol Et"></td></tr><br>

<tr><td>Şifre:</td><td><input type="password" name="sifre"></td></tr><br>

<tr><td>Adı:</td><td><input type="text" name="textadi"></td></tr><br>

<tr><td>Soyadı:</td><td><input type="text" name="textsoyadi"></td></tr><br>

</table>

Cinsiyet:Bay<input type="radio" name="secenek">

Bayan<input type="radio" name="secenek"><br>

İlgi Alanlarınız:<br>

Müzik<input type="checkbox" name="checkmuzik">

spor<input type="checkbox" name="checkspor">

Sinema<input type="checkbox" name="checksinema">

Tiyatro<input type="checkbox" name="checktiyatro"><br>

Doğum Yeri:<select name="msehir" size="1">

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

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

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

<option value="sehir">Diğer</option></select>

Mesaj:<br>

<textarea name="mesaj" cols="40" rows="10">

</textarea><br><br>

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

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

</form>

</fieldset>

</body>

</html> [/csharp]

 

 

Html’de hazırlanmış form örnekleri için link : https://www.gorselprogramlama.com/forum-ornekleri-html-web-tasarim-ve-programlama

2.link : https://www.gorselprogramlama.com/form-ornekleri-2-html-web-tasarim-ve-programlama

Từ khóa » Html Kodları Form Oluşturma