Temel HTML ile İş Başvuru Formu

Bu yazımızda Temel HTML nesnelerini inceleyeceğiz. Bir iş başvuru formu oluşturarak text, checkbox, radio, button, select, textarea neslerinin kullanımını inceleyeceğiz.



Saf HTML Kodlarımız

<!DOCTYPE html>
<html>
<head>
<title>İş Başvuru Formu</title>
          <meta charset="utf-8">
</head>
<body>

<form method="POST" action="#">

<table border="1" align="center" cellpadding="3">
<tr>
<td colspan="2" align="center">
<h3>İş Başvuru Formu</h3>
</td>
</tr>
<tr>
<td>Adı</td>
<td><input type="text" name="ad"></td>
</tr>
 
<tr>
<td>Soyadı</td>
<td><input type="text" name="soyad"></td>
</tr>

<tr>
<td>Kullanıcı Adı</td>
<td><input type="text" name="kullanici"></td>
</tr>

<tr>
<td>Şifre</td>
<td><input type="password" name="sifre"></td>
</tr>
 
<tr>
<td>Doğum Tarihi</td>
<td><input type="date" name="dtarihi"></td>
</tr>

<tr>
<td>Doğum Yeri</td>
<td>
  <select name="dogumyeri">
       <option value="06">Ankara</option>
       <option value="34">İstanbul</option>
       <option value="35">İzmir</option>
       <option value="00">Diğer</option>
    </select>
</td>
</tr>

<tr>
<td>Cinsiyet</td>
<td>
<input type="radio" name="cinsiyet" value="bay">Bay
<input type="radio" name="cinsiyet" value="bayan">Bayan
</td>
</tr>
 
<tr>
<td>Referanslar</td>
<td>
    <textarea cols="40" rows="3">
</textarea>
</td>
</tr>
 
<tr>
<td>Alışkanlıklar</td>
<td>
<input type="radio" name="sigara" value="0">Sigara içiyorum
<input type="radio" name="sigara" value="1">Sosyal içiciyim
<input type="radio" name="sigara" value="2">İçmiyorum
</td>
</tr>
 
<tr>
<td>Yabancı Dil</td>
<td>
<input type="checkbox" name="en">İngilizce<br>
<input type="checkbox" name="de">Almanca<br>
<input type="checkbox" name="fr">Fransızca<br>
<input type="checkbox" name="ing">İspanyolca<br>
<input type="checkbox" name="es">Çince<br>
<input type="checkbox" name="ru">Rusça
</td>
</tr>
 
<tr>
<td>Askerlik</td>
<td>
<select name="askerlik">
<option value="tecilli">Tecilli</option>
<option value="muaf">Muaf</option>
<option value="Yapıldı">Yapıldı</option>
</select>
</td>
</tr>
 
<tr>
<td>Eğitim</td>
<td>
<select name="egitim">
<option value="lise">Lise</option>
<option value="onlisans">Ön Lisans</option>
<option value="lisans">Lisans</option>
<option value="y.lisans">Y.Lisans</option>
<option value="doktora">Doktora</option>
</select>
</td>
</tr>
 
<tr>
<td>Geçmiş İşler</td>
<td>
<textarea cols="40" rows="4"></textarea>
</td>
</tr>
 
<tr>
<td colspan="2" align="center">
<input type="submit" 
  value="Kaydet">
</td>
</tr>
 
 
</table>
</form>
 
</body>
</html>

Yukarıdaki kodları yazıp kaydettiğimizde aşağıdaki ekran görüntüsü ile karşılaşacağız. Diğer derslerimizde farklı uygulamalar geliştireceğiz.




Mutlu Kodlamalar,
Oğuzhan TAŞ
Kasım 2017
 
Bookmark and Share
Dil Değiştir(Change Language)