HTML Form Örnekleri

S

sdkbyrm

webmasterfrm
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Ticaret: 0 / 0 / 0
HTML ile input type=”text”, input type=”number”, input type=”file”, input type=”radio”, input type =”checkbox”, textarea, input type=”submit, input type=”reset” kullanımlarını gösteren tablo içine yerleştirilmiş Form örneklerini bu yazıda inceleyebilirsiniz.


HTML‘ de kullanıcıdan bilgi girişi almak için HTML form nesneleri kullanılır. Aşağıdaki örneklerde bu nesnelerin çeşitli kullanım şekillerini göreceksiniz.

Form Elemanlarının detaylı anlatımı için HTML Form Kullanımı yazısına yada tek örnekle tüm form elemanları ve nitelikleri için bakabilirsiniz.

Örnek 1​

1608733059941.png



Örnek 2​

1608733076721.png
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="http://yazilimkodlama.com" method="get" enctype="multipart/form-data">
<table border="2">
<tr>
<td><label for="ad">Ad</label></td>
<td colspan="1"><input type="text" name="ad" id="ad" required></td>
</tr>

<tr>
<td>Soyad</td>
<td colspan="1"><input type="text" name="soyad" id="soyad" required></td>
</tr>

<tr>
<td>Yaş</td>
<td><input type="number" name="yas" id="yas" min="0" max="120" placeholder="Yaşınızı girin"></td>
</tr>

<tr>
<td>Resim Ekle</td>
<td><input type="file" name="resim" id="resim"></td>
</tr>

<tr>
<td>TC No</td>
<td><input type="text" name="tc" id="tc" maxlength="11"></td>
</tr>

<tr>
<td>Cinsiyet</td>
<td>K<input type="radio" name="cinsiyet" id="cinsiyet" value="K" checked>
E<input type="radio" name="cinsiyet" id="cinsiyet1" value="E"></td>
</tr>

<tr>
<td>Yabancı Diller</td>
<td>İngilizce<input type ="checkbox" name="dil" id="dil" checked value="ingilizce">
Fransızca<input type="checkbox" name="dil1" id="dil1" value="fransızca">
Japonca<input type="checkbox" name="dil2" id="dil2" value="japonca">
</td>

<tr>
<td>Görüş</td>
<td>
<textarea name="gorus" id="gorus" placeholder="GÖRÜŞÜNÜZ BİZİM İÇİN ÖNEMLİ"></textarea>
</td>
</tr>
</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>

Örnek 3:​

1608733089522.png
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form action="" method="" >
Adınız:<input type="text" name="txtIsim">
<br><br>
Soyadınız:<input type="text" name="txtSIsim">
<br><br>
Şifreniz:<input type="password" name="txtSifre">
<br><br>
Cinsiyetiniz:<input type="radio" name="cinsiyet">Erkek <input type="radio" name="cinsiyet">Bayan
<br><br>
Bildiğiniz Diller:<input type="checkbox" name="dil1">İngilizce
<input type="checkbox" name="dil2">Almanca
<input type="checkbox" name="dil2">Fransızca
<br><br>
Yaşadığınız İl:<select>
<option>İstanbul</option>
<option>Ankara</option>
<option>İzmir</option>
</select>
<br><br>
Adresiniz:<br>
<textarea rows="5" cols="30"></textarea>
<br><br>
<input type="submit" name="btnGonder" value="Gönder">
<input type="reset" name="btnTemizle" value="Temizle">
</form>


Örnek 4:​

1608733103087.png
Html Kodları:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<title>Web Tasarım</title>
<meta charset="utf-8">
</head>
<body>
<form>
<fieldset>
<legend>
Spor Seçim Formu:
</legend>

<table border="2" bgcolor="aqua" >

<tr>
<td>Adı:<br></td>

<td><input type="text" name="ad"></td>

<tr>
<td>Soyadı:<br>
<td><input type="text" name="soyad"></td>
</tr>
<tr>
<td>Sınıf:<br>
<td><input type="text" name="sınıf"></td>
</tr>
<tr>
<td>Numara:<br>
<td><input type="text" name="numara"></td>
</tr>


<select name="alanlar">
<option value="vol">VOLEYBOL</option>
<option value="bas">BASKETBOL</option>
<option value="fut">FUTBOL</option>
<option value="hen">HENTBOL</option>

</select>

</table>
Mesajınız:<br>
<textarea name="mesaj" rows="15" cols="40">
</textarea>
</fieldset>
</form>
<a href="#">GERİ DÖN</a>
</body>
</html>


Örnek 5:​

1608733115020.png
Kodlar:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<title>Web Tasarım</title>
<meta charset="utf-8">
</head>
<body>
<form>
<fieldset>
<legend>
iletişim Formu
</legend>


<table border="1">

<tr>
<td>Adınız Soyadınız : </td>
<td><input type="text" name="adsoyad"> </td>
</tr>
<tr>
<td>E-Posta Adresiniz : </td>
<td><input type="text" name="mail"> </td>
</tr>
<tr>
<td>Telefonunuz : </td>
<td><input type="text" name="mail" placeholder="(___)(_______)"> </td>
</tr>

<tr>
<td>TC Kimlik Numaranız : </td>
<td><input type="text" name="tckimlik" placeholder="11 hane olmalıdır."> </td>
</tr>

<tr>
<td>Bildiğiniz Yabancı Diller</td>
<td>
<label for="ing">İngilizce</label><input type="checkbox" id="ing" value="ing"><br>
<label for="alm">Almanca</label><input type="checkbox" id="alm" value="alm"><br>
<label for="fra">Fransızca</label><input type="checkbox" id="fra" value="fra">
</td>
</tr>

<tr>
<td>Mesajınız : </td>
<td><textarea cols="22" rows="7" name="mesaj"></textarea> </td>
</tr>

</table>

</fieldset>

</form>
</body>
</html>
 
Forum da cevap yazabilmeniz için Giriş Yapın ve Kayıt Ol'un.
Üst