Yazar: Merhaba değerli ozdogan.gen.tr takipçileri!
Bu yazımda sizlere html kullanarak hazırlamış olduğum örnekleri sunacağım.
Bu örnekleri inceleyerek sizlerde html bilginizi pekiştirebilirsiniz ve html ile ilgili farklı form tasarımları elde etmek için fikir edinebilirsiniz.
Bu örnekleri kendinize göre uyarlayarak kullanabilirsiniz.
örnek bir:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html form örneği </title>
</head>
<body>
<h1> html form örneği </h1>
<div id=”form”>
<form method=”post” action=”form.html”>
<label> adınız </label>
<input type=”text” name=”ad”>
<label> soy adınız </label>
<input type=”text” name=”soyad”>
<label> e-posta adresi </label>
<input type=”text” name=”e-posta”>
<label> şifreniz </label>
<input type=”pass” name=”şifre”>
<input type=”submit” name=”kayıtol” value=”kayıtol”>
<input type=”reset” name=”sil” value=”sil”>
</form>
</div>
</body>
</html>
İlk form örneğimizi incelediyseniz oldukça sade ve basit bir form göreceksiniz. text alanları ve butonlardan oluşan bir form yapısı karşımıza çıkmaktadır.
örnek iki:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html form örnğeği iki </title>
</head>
<body>
<div id=”form-alan”>
<form method=”post” action=””>
<label for=”Ad”>Ad:</label>
<input type=”text” name=”Ad” id=”Ad” />
<label for=”Soyad”>Soyad:</label>
<input type=”text” name=”Soyad” id=”Soyad” />
<label for=”Email”>Eposta:</label>
<input type=”text” name=”Email” id=”Email” />
<label for=”Mesaj”>Mesaj:</label><br />
<textarea name=”Mesaj” rows=”20″ cols=”20″ id=”Mesaj”></textarea>
<input type=”submit” name=”kaydet” value=”Kaydet” />
</form>
</div>
</body>
</html
Bu örneğimizde ise yukarıdaki örnekten farklı olarak textarea etiketinin kullanımı ve ilk örnekte e-postakısmını text olarak yapmıştık, ancak bu örnekte ise e-mail parametresini kullanarak form oluşturduk.
örnek üç:
<doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html form örnekleri üç </title>
</head>
<body>
<form action=”https://ozdogan.gen.tr” method=”get”>
<table border=”0″>
<tr>
<td> ad: </td>
<td><input type=”text” name=”ad” id=”ad” required placeholder=”Lütfen Adınızı Girin”></td>
</tr>
<tr>
<td> soyad: </td>
<td><input type=”text”name=”soyad”id=”soyad” required placeholder=”Lütfen Soyadınızı Girin”></td>
</tr>
<tr>
<td colspan=”2″>
FUTBOL<input type=”checkbox”name=”hobi1″ id=”hobi1″>
YÜZME<input type=”checkbox”name=”hobi2″ id=”hobi2″>
KARATE<input type=”checkbox”name=”hobi3″ id=”hobi3″>
KİTAP<input type=”checkbox”name=”hobi4″ id=”hobi4″>
</td>
</tr>
<tr>
<td colspan=”2″>
KADIN<input type=”radio”name=”cinsiyet” id=”cinsiyet” value=”kadın”>
ERKEK<input type=”radio” name=”cinsiyet” id=”cinsiyet” value=”erkek”>
</td>
</tr>
<tr>
<td> yaş </td>
<td><input type=”number” name=”yas” id=”yas” min=”18″ max=”88″></td>
</tr>
<tr>
<td> e-posta: </td>
<td><input type=”email” name=”mail” id=”mail” required></td>
</tr>
<tr>
<td colspan=”2″>
<input type=”submit” name=”kaydet” id=”kaydet” value=”KAYDET”>
<input type=”reset” name=”sil” id=”sil” value=”TEMİZLE”>
</td>
</tr>
</table>
</form>
</body>
</html>
Son html form örneğimizde ise daha farklı bir yapı oluşturduk biraz kapsamlı bir üyelik formu olarak düşünebilirsiniz. burada text ve butonlar dışında, radio, check box ve number gibi elemanlar kullanarak formumuzu oluşturduk.
Sizlerde html ile form oluştururken bu örnekleri göz önünde bulundurabilir ve web sayfanız için bu ve ya buna benzer örnekler hazırlayabilirsiniz. soru ve sorunlarınızı yorumolarak bana ulaştırabilirsiniz. iyi bloglamalar herkese.a
Bir önceki yazımız olan html img etiketi ve kullanımı başlıklı makalemizde html bağlantıya resim verme, html img etiketi ve html sayfaya resim ekleme hakkında bilgiler verilmektedir.