LARAVEL
SASS
Form elemanları web sayfalarında kullanıcıdan veri,dosya transferleri,video,ses gibi veri ve materyallerin alınması veya sunulmasına imkan sağlayan elementlerdir. Form elemanları <form></form> etiketleri arasında bulunmalıdır. Form etiketi bütün elemanları kapsayıcı bir özelliğe sahiptir. Bir sayfada birden çok form kullanılabilmektedir. Formlara verilen name özelliğiyle formlar bir birinden ayrılmaktadır. Aynı zamanda da javascript kodları ile dinamik formlar oluşturulabilmektedir. Aşağıda başlıca form örnekleri ve elementleri verilmiştir. Faydalı olası dileğiyle, başarılar.
FORM /TEXT / SUBMIT ELEMENTLERİ
1 2 3 4 5 6 7 8 9 10 11 | <form action="/action_page.php"> <fieldset> <legend>KULLANICI GİRİŞİ</legend> KULLANICI ADI:<br> <input type="text" name="ADI" value="ÇAĞLAR"><br> SOYADI:<br> <input type="password" name="PASO" value="HOCA"><br><br> <input type="reset" value="Temizle"> <input type="submit" value="GÖNDER"> </fieldset> </form> |
FORM ETİKETİ
1 2 3 4 5 6 7 8 9 10 | <form action="/action_page.php"> <fieldset> <legend>KULLANICI GİRİŞİ</legend> ADI:<br> <input type="text" name="ADI" placeholder="ÇAĞLAR"><br> SOYADI:<br> <input type="text" name="SOYAD" placeholder="ÇAĞLAR"><br><br> <input type="submit" value="GÖNDER"> </fieldset> </form> |
SELECTED KULLANIMI
1 2 3 4 5 6 | <select name="sehirler"> <option value="ankara" selected="selected">Ankara</option> <option value="istanbul">İstanbul</option> <option value="manisa">Manisa</option> <option value="izmir">İzmir</option> </select> |
TEXTARE KULLANIMI
1 | <textarea name="metinalani" rows="20" cols="40"> Güle sormuşlar: neden dikenlisin? : beni yalandan değil gerçekten seven tutabilsin diye ! Can Yücel</textarea> |
BUTON KULLANIMI
1 | <button type="button" onclick="alert('Hello World!')">MESAJ</button> |
DATALİST KULLANIMI
1 2 3 4 5 6 7 8 9 10 | <form action="index2.html"> <input list="sehir"> <datalist id="sehir"> <option value="Ankara"> <option value="İstanbul"> <option value="Manisa"> <option value="İzmir"> <option value="GÜZELDİR AMA BANONE"> </datalist> </form> |
SECURITY KULLANIMI
1 2 3 4 5 | <form action="/index.php"> Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit"> </form> |
ÇIKIŞ ELEMANI / RANGE / NUMBER KULLANIMI
1 2 3 4 5 6 7 8 9 | <form action="" oninput="y.value=parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50" step="10" max="100" min="0" oninput="x.value=parseInt(a.value)"> 100=<output name="x" for="a"></output> <input type="number" id="b" name="b" value="50" step="10" max="100" min="0" oninput="x.value=parseInt(a.value)"> =<output name="y" for="b"></output> <br><br> <input type="submit"> </form> |
RADİO KULLANIMI
1 2 | <input type="radio" value="BAY" name="cinsiyet" /> BAY<BR> <input type="radio" value="BAYAN" name="cinsiyet" /> BAYAN<BR> |
CHECKBOX KULLANIMI
1 2 3 4 | <input type="checkbox" name="telefon" > Telefon<br> <input type="checkbox" name="eposta" > e-Posta<br> <input type="checkbox" name="adres"> Adres <input type="checkbox" name="adres" disabled> Adres 2 |
COLOR KULLANIMI
1 2 3 4 | <form action="" > <input type="color" name="arkaplan"> <output name="y" for="b"></output> </form> |
TARİH KULLANIMI
1 | <input type="date" name="tarih" max="2019-12-31" min="2000-01-02"/> |
TARİH SAAT KULLANIMI
1 | <input type="datetime-local" name="tarih" max="2019-12-31 00:00" min="2000-01-02 00:00"/> |
e-POSTA KULLANIMI
1 | <input type="email" name="email"> |
AY/YIL KULLANIMI
1 | <input type="month" name="ay"> |
DİĞER KAVRAMLAR
readonly
1 | <input type ="text" name="ad" value="ÇAĞLAR" readonly> |
disabled
1 | <input type ="text" name="ad" value="ÇAĞLAR" disabled> |
size : özniteliği giriş alanı için (karakter) boyutunu belirtir
1 | <input type ="text" name="ad" value="ÇAĞLAR" size="50"> |
maxlength: en çok girilebilir karakter sayısı.
1 | <input type ="text" name="ad" value="ÇAĞLAR" maxlength="10"> |
Otomatik tamamlama özelliği on/off
1 | <input type="email" name="email" autocomplete="on"> |
autofocus Sayfa okunduğunda direk odaklanır.
1 | <input type ="text" name="ad" autofocus> |
novalidate/zorunlu alanlarda uyarı vermez. formnovalidate novalidate’yi etkisiz hale getirir.
1 2 3 | <form name="gonder" method="post" novalidate> <input type="submit" formnovalidate value="Submit without validation"> </form> |
Formun gönderileceği sayfaları değiştirme
1 2 3 4 5 6 | <form action="index.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="index2.php" value="DİĞER SAYFAYA POST ET"> </form> |
DOSYA GÖNDERME
1 2 3 | <form action="index.php" method="post" formenctype="multipart/form-data"> <input type="submit" value="Submit"><br> </form> |
1 2 3 4 5 6 | <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="/action_page_post.php" value="POST İLE GÖNDER"> </form> |
Girilen değerleri denetleme
1 | <input type="text" name="ad" pattern="[A-Za-z]{3}" title="A DAN Z BÜYÜK KÜÇÜK ÜÇ KARAKTER GİRİLİR"> |
placehoder kullanımı
1 | <input type="text" name="fname" placeholder="First name"> |
required kullanımı
1 | <input type="text" name="usrname" required> |
Sayfaya vido ekleme
1 2 3 4 5 | <video width="100%" height="500" muted="" controls preload="" loop poster="zemin.jpg" src="video.mp4"> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> </video> |
SES DOSYASI EKLEME
1 2 3 | <audio controls src="es.mp3"> <source src="es.mp3" type="audio/mp3"> </audio> |