HTML Form

Web’in en kullanışlı niteliği ve belki de, internet üzerindeki öteki servislere göre daha yaygın olmasının nedeni formlardır . Kullanıcı ile etkileşimli dinamik web sayfaları hazırlayabilmek için HTML

Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. Kullanıcının girdiği bilgiler sunucu makinaya gönderilir. Gönderilen bu bilgiler belirlenen bir dosyaya yazılır. Burada biriken verilerin işlenmesi gerekiyorsa, o işi yapacak bir programın ayrıca yazılması gerekir. HTML yalnızca, kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez.

Kullanıcının form aracılığı ile sunucuya gönderdiği verileri işleyen programlar uygun bir programlama diliyle yazılabilir. Örneğin php, asp.net gibi…

HTML formların ne şekilde kullanıldıklarına bir bakalım.

<Form> nedir?

<form> etiketi html formları oluşturmak için kullanılır. Form oluşturmayı sağlayan tüm form elemanları

etiketleri arasında yer alır.


<form>
  .
   form kontrolleri
  .
</form>

<form>

form kontrolleri

</form>

Genel Kullanımı :


<FORM ACTION="url" METHOD="get- post" TARGET="pencere">
... 
</FORM>

...

</FORM>

ACTION : Form verilerin gönderileceği sunucu taraflı çalışan (php, aspx) dosya yoludur.


<form action="action_page.php">

METHOD : Form verilerinin gönderim şeklidir. Bu yöntemler GET ve POST yöntemidir.


<form action="action_page.php" method="get">
<form action="action_page.php" method="post">

HTTP protokolünün günümüzde en çok kullanılanları GET ve POST metodlarıdır. Sadece istemci tarafına basit veri alma gibi işlemler söz konusu olduğunda GET metodu, tam tersine servis tarafına parametreler gönderip düzenleme, veri aktarma yada operasyon çağırma gibi işlemler söz konusu olduğunda POST,PUT gibi metodlar kullanılır.

Şimdi <form> etiketleri arasında kullanacağınız form elementlerini yakından tanıyalım.

<INPUT> element

<INPUT> etiketi form içerisinde bilgi almak için kullanılan etikettir. Hangi veri türünde girişin yapılacağını burada kullanılan type elemanı belirlemektedir. type elemanının varsayılan değeri text(metin) olmakla birlikte belirtilecek olan (text, password, checkbox, radio,submit, reset gibi) farklı değerleri de alabilir. <input> etiketinin sonlandırıcı etiketi bulunmaz yani bu etiket kapatılmaz.

<INPUT TYPE=tip NAME=isim VALUE=değer MAXLENGTH=uzunluk SIZE=boyut >

Özellik	Açıklama
TYPE	Girilecek olan elemanın türünü belirtmek için kullanılır
NAME	Girilecek olan verinin değişken ismini belirlemek için kullanılır.
VALUE
SIZE	Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır.Hiçbir rakam belirtilmediği takdirde varsayılan değeri 20’dir.
MAXLENGTH	Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır.

Daha fazla özellikler için http://www.w3schools.com/html/html_form_attributes.asp adresine gözatabilirsiniz.

Aşağıdaki örnekte <input> ile metin kutularından oluşan basit bir form örneği görüyorsunuz.


<body>
  <h1>yazilimbilisim.net</h1>
  <form action="http://localhost:35746/Default.aspx" method="get">
	<p>TC Kimlik No : <input type="text" name="tcno"></p>
	<p>Ad Soyad     : <input type="text" name="adsoyad"></p>
	<p>Unvan        : <input type="text" name="unvan"></p>
  </form>
</body>

<body>

<h1>yazilimbilisim.net</h1>

<p>TC Kimlik No : <input type="text" name="tcno"></p>

<p>Ad Soyad : <input type="text" name="adsoyad"></p>

<p>Unvan : <input type="text" name="unvan"></p>

</form>

</body>

input

CheckBox

Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılır. Onay kutuları, listelenen seçeneklerden istediğiniz kadarını seçebilmenize veya tümünü seçilmemiş duruma getirmenize olanak sağlar.


<form action="https://yazilimbilisim.net/Default.aspx" method="get">
  <input type="checkbox" name="web" value="Web"> Web Tasarım<br>
  <input type="checkbox" name="grafik" value="Grafik"> Grafik Animasyon 		
</form>

<input type="checkbox" name="web" value="Web"> Web Tasarım<br>

<input type="checkbox" name="grafik" value="Grafik"> Grafik Animasyon

</form>

check

Radio

Radio düğmeleri, kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin ayni olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir.


<form action="https://yazilimbilisim.net/Default.aspx" method="get">
  <input type="radio" name="takim" value="gs" checked> Galatasaray<br>
  <input type="radio" name="takim" value="fb"> Fenerbahçe <br>
  <input type="radio" name="takim" value="bjk"> Beşiktaş 
</form>

<input type="radio" name="takim" value="gs" checked> Galatasaray<br>

<input type="radio" name="takim" value="fb"> Fenerbahçe <br>

<input type="radio" name="takim" value="bjk"> Beşiktaş

</form>

radio

Password

Hazırlamakta olduğunuz forma şifreli alanlar eklemek için kullanılır. Type özelliğine, “password” değeri atanarak oluşturulur.


<form action="https://yazilimbilisim.net/Default.aspx" method="get">
   <p>Mail : <input type="text" name="mail"></p>
   <p>Şifre : <input type="password" name="sifre"></p>		
</form>

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

</form>

password

TextArea

Text kutularının görevi, hazırlamakta olduğumuz forma tek satırlık veri giriş alanları eklemek iken <Textarea> kullanarak forma, birden fazla satırdan oluşan alanlar ekleyebiliriz. Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenebilir.


<form action="https://yazilimbilisim.net/default.aspx" method="get">
    <p>Konu</p> <textarea name="konu" rows="5" cols="30"></textarea>		
</form>

</form>

textarea

Select

Hazırlamakta olduğunuz formlara <select> (seç) etiketi kullanarak açılır menüler ekleyebilirsiniz. Listbox (liste kutusu) ve drop-down list (aşağı açılır liste) şeklinde iki farklı tür de seçim kutusu oluşturulabilir. Listede yer alacak elemanların neler olacağı ise <option> etiketi ile belirlenir.


<form action="https://yazilimbilisim.net/Default.aspx" method="get">
   <select name="sehir">
	<option>İstanbul</option>
	<option>Ankara</option>
	<option>Sakarya</option>
   </select>
</form>

<option>İstanbul</option>

<option>Ankara</option>

<option>Sakarya</option>

</select>

</form>

select

Size özelliği listeden yer alan elemanlardan istediğiniz kadarının ekranda görüntülenmesini ayarlamak için kullanılır. Multiple özelliği ise Ctrl tuşu kullanarak birden fazla seçim yapmamıza olanak sağlamaktadır.


<select name="sehir" size="2" multiple="multiple">

Liste öğesine selected özelliği eklenerek seçilmiş olanı belirleyebilirsiniz.


<option value="fiat" selected>Fiat</option>

Button

Formunuza tıklandığında bir görevi çağıran bir buton ekleminizi sağlar.


<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

onclick özelliği ile html dökümanınızda bulunan bir javascript fonksiyonu çağırabilirsiniz.

Submit Button

Submit (gönder), form içerisinde yer alan içeriklerin sunucuya gönderilmesini sağlamak için kullanılır.

<input type=”submit”>
“Value” özelliği düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.


<form action="http://localhost:35746/Default.aspx" method="get">
	<p>TC Kimlik No : <input type="text" name="tcno"></p>
	<p>Ad Soyad     : <input type="text" name="adsoyad"></p>
	<p>Unvan        : <input type="text" name="unvan"></p>
	<input type="submit" value="Gönder">		
</form>

<p>TC Kimlik No : <input type="text" name="tcno"></p>

<p>Ad Soyad : <input type="text" name="adsoyad"></p>

<p>Unvan : <input type="text" name="unvan"></p>

</form>

submit

Reset Button

Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar.

<input type=”reset”>
“Value” özelliği, düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.


<form action="http://localhost:35746/Default.aspx" method="get">
	<p>TC Kimlik No : <input type="text" name="tcno"></p>
	<p>Ad Soyad     : <input type="text" name="adsoyad"></p>
	<p>Unvan        : <input type="text" name="unvan"></p>
	<input type="submit" value="Gönder">	
	<input type="reset" value="Temizle">
</form>

<p>TC Kimlik No : <input type="text" name="tcno"></p>

<p>Ad Soyad : <input type="text" name="adsoyad"></p>

<p>Unvan : <input type="text" name="unvan"></p>

</form>

submit2

İlgili

Konuda form elemanlarını öne çıkarmak amacıyla hizalama gibi diğer biçimlemeleri gözardı ederek örneklemelerde bulundum. Sorunuz için en basitinden form içeriğini tablo içinde saklı tutarak hizalamaları yapabiliriz ve birazda style tanımlaması katarak… Örneğin ;


<!doctype html>
<html>
	<head>
		<title>Form Örnekleri</title>
		<meta charset="utf-8">
	</head>
	<body>
		<style>
			td{text-align: right}
		
		</style>
		<h1>yazilimbilisim.net</h1>
		<form action="https://yazilimbilisim.net/Default.aspx" method="get">
			<table>
				<tr>
					<td><p>TC Kimlik No</p></td>
					<td><input type="text" name="tcno"></td>
				</tr>
				<tr>
					<td><p>Ad Soyad</p></td>
					<td><input type="text" name="adsoyad"></td>
				</tr>
				<tr>
					<td><p>Unvan</p></td>
					<td><input type="text" name="unvan"></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="Gönder">	
			            <input type="reset" value="Temizle">
					</td>					
				</tr>
			</table>
		</form>
	</body>
</html>

<!doctype html>

<html>

<head>

<title>Form Örnekleri</title>

</head>

<body>

<style>

td{text-align: right}

</style>

<h1>yazilimbilisim.net</h1>

<table>

<tr>

<td><p>TC Kimlik No</p></td>

</tr>

<tr>

<td><p>Ad Soyad</p></td>

</tr>

<tr>

<td><p>Unvan</p></td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

Tabi sadece tablolarla değil “div” elementi ile aynı hizalamaları yapabilirsiniz. Bu konu hakkında yazımız yayınlandığında ilgili linki size paylaşabilirim. İyi çalışmalar…

Cevapla

HTML Form

İlgili

Yorum

Yorum Yap X

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X