Form Bileşenleri

Web Tasarım ve Programlama

Form Dosyasını indirmek içintıklayınız. 

Form Bileşenlerinin Çerçeve içine alınarak Gruplanması <fieldset></fieldset>
Çerçevenin İsimlendirilmesi <legend>Grubun Genel Adı</legend>

Text Bileşeni : 

            <input type="text" name="adsoyad" required="">

Radyo Buton:              <input type=”radio” name=”cinsiyet” value=”k”>Kız
             <input type=”radio” name=”cinsiyet” value=”e”>Erkek
Tarih İçin <input type=”date” name=”dtarihi”>Listeden Seçim :<select name=”ogrenim”>
<option value=”1″>İlk Öğretim</option>
<option value=”2″>Orta Öğretim</option>
<option value=”3″>MYO</option>
</select></td>Listeden Yazarak Bilgi Seçme:<input list=”dyeri”>

<datalist id=”dyeri”>
<option value=”Malatya”>
<option value=”Ankara”>
<option value=”Eskişehir”>
<option value=”Bursa”>
<option value=”Bilecik”>
</datalist>Gönder ve Reset Düğmeleri:<input type=”submit” name=”” ></td><td><input type=”reset” name=””>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<fieldset><legend style="text-align: center;">Üyelik Formu</legend>
<form action="http://www.google.com" method="GET">
<table  align="center">
	<tr><td>Ad Soyad:</td>
		<td><input type="text" name="adsoyad" required> </td>
</tr>
<tr><td>Cinsiyet:</td>
	<td><input type="radio" name="cinsiyet" value="k">Kız <input type="radio" name="cinsiyet" value="e">Erkek 
	</td>
</tr>

<tr><td>Doğum Tarihi</td><td><input type="date" name="dtarihi"></td>
<tr><td>Şifre</td><td><input type="password" name="sifre"></td></tr>
<tr><td>En Sevdiğiniz Renk</td><td><input type="color" name="ensevrenk"></td></tr>

<tr><td>Doğum Yeri</td><td><input list="dyeri">

<datalist id="dyeri">
  <option value="Malatya">
  <option value="Ankara">
  <option value="Eskişehir">
  <option value="Bursa">
  <option value="Bilecik">
</datalist></td></tr>

<tr><td>Öğrenim Durumunuzu Seçiniz</td><td><select name="ogrenim">
	<option value="1">İlk Öğretim</option>
	<option value="2">Orta Öğretim</option>
	<option value="3">MYO</option>
</select></td></tr>


<tr><td><input type="submit" name="" ></td><td><input type="reset" name=""></td></tr>

</table></form>
</fieldset>

</body>
</html>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir