HTML'de Formlar – HTML Eğitimi – Web Uygulaması Geliştirme

HTML formları web geliştirmenin çok önemli bir parçasıdır. Google'dan bir şey aradıysanız. Aslında bir arama formu gönderdiniz. Facebook, twitter veya başka bir platformda bir durum yayınladıysanız, başka bir HTML formu doldurmuşsunuzdur. Benzer şekilde, bir zamanlar çevrimiçi bir satın alma işlemi yaptıysanız ve kişisel bilgilerinizi doldurduysanız, aslında bir HTML formu doldurmuşsunuzdur. Benzer şekilde anketler, iletişim formları, hesap makineleri, kullanıcı bilgi formları, makale formları ve diğer birçok form türü web'de her yerdedir.

Bildiğimiz gibi, formlar web'in gerçekten çok önemli bir parçası. Benzer şekilde, birkaç tür girdi alanı olduğunu biliyoruz. Metin alanları, telefon alanları, e-posta alanları, tarih alanları, metin alanı, seçimler, radyo, onay kutuları ve veri listesi gibi günümüzde de. Onları anlamaya çalışalım.

HTML formu nasıl yapılır

Bir HTML formu oluşturmak için <form></form> etiketler öğesinin içindeki alanları sarmanız yeterlidir.

Form etiketi, aşağıdaki örnekte görebileceğiniz gibi, en önemlileri action="" ve method="" olan birçok özellik türünü kabul eder.

HTML formundaki action="" özniteliği, verilerin hangi sayfada gönderileceğini gönder düğmesine tıklandığında, formun nereye gönderileceğini söyler. Bizim durumumuzda, gönder düğmesine tıklandığında tüm bilgiler thankyou.html ile gönderilecektir.

Öte yandan, method="" niteliği, iki tür gönderiyi kabul eder ve post ile get arasındaki tek fark, gönderi, URL'de veri gönderirken, gönderi verilerinin gizlenmesidir. Get yöntemi ile başlayan sorgu dizeleri ile veri gönderir? soru işareti gibi. http://yoursite.com/?myname=”” burada ?myname get yöntemi ile gönderilmektedir.

 <form action="thankyou.html" method="post"> ... </form>

Şimdi formumuzu oluşturmadan önce bazı HTML form alan türlerine bir göz atalım.

Giriş öğeleri

HTML formlarında çeşitli girdi öğeleri vardır. Hangi tarih, metin, tel, numara, tarih, renk ve çok daha fazlasını kullanabilirsiniz.

Not: varsayılan giriş türü metindir, bu nedenle tür eklemeyi atlamanız durumunda otomatik olarak metin olur.

Bazılarını daha ayrıntılı olarak açıkladığımız diğer girdi türleri aşağıda listelenmiştir.

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Metin alanı

<input type=”metin”, tek satırlık metin alanını tanımlamak için kullanılır. Çok satırlı metin girişini almak istiyorsanız, metin alanını kullanabilirsiniz. Örneğin sadece ilk adı almak istiyorsanız, metin tipi giriş alanı iyidir.

 <lable for="firstName">First Name</label> <input type="text" name="firstName" />

Şifre Alanı

Basit metin alanına şifre giremezsiniz çünkü birisi şifresini girerken etraftakiler tarafından görülecektir. Böylece her zaman şifre metni yerine yalnızca noktaları gösteren giriş tipi şifreyi kullanabilirsiniz.

 <label for="pwd">Password:</label><br> <input type="password" name="pwd">

Giriş Tipi Numarası

<input type="number"> sayısal bir giriş alanı tanımlar. Hangi numaraların kabul edileceğine ilişkin kısıtlamalar da belirleyebilirsiniz. Aşağıdaki örnek, 1 ile 10 arasında bir değer girebileceğiniz sayısal bir giriş alanı görüntüler:

 <form> <label for="percentage">Color Percentage 1 to 10:</label> <input type="number" name="percentage" min="1" max="10"> </form>

Tarih Alanı

<input type="date"> bir tarih seçiciyi tanımlar. Ortaya çıkan değer yıl, ay ve günü içerir.

İpucu: En iyi erişilebilirlik uygulamaları için her zaman <label> etiketini ekleyin!

 <label for="eventDate">Event on:</label> <input type="date" name="eventDate">

Girdi Türü Tarihsaat-yerel

Tarih ve saati almak istiyorsanız, <input type="datetime-local"> , saat dilimi olmadan bir tarih ve saat giriş alanı belirtir.

Hemen hemen tüm modern tarayıcılar, kullanıcıdan tarih ve saat almanıza izin veren bu giriş türünü destekler.

 <label for="pickupTime">Please select time to pick order:</label> <input type="datetime-local" name="pickupTime">

Metin Alanı

Kullanıcıdan 1 satırdan fazla metin almak istediğinizde metin alanı kullanışlıdır. Örneğin, kullanıcının koymak istediği mesaj çok satırlı veri iken ad veya tam ad tek satır olabilir. Böylece tek satır giriş metin alanından alınabilir, ancak daha fazla satır için metin alanı uygundur. Bir textarea'yı nasıl oluşturabileceğiniz aşağıda açıklanmıştır.

 <textarea name="message"> The cat was playing in the garden. </textarea>

Seçin veya Açılır Menü

Seçim veya açılır menü her zaman <select> öğesiyle başlar ve içinde seçilecek <options> bulunan </select> ile biter. Aşağıdaki ülke seçimi örneğine bakın.

 <label for="country">Choose a Country:</label> <select name="country"> <option value="japan">Japan</option> <option value="england">England</option> <option value="pakistan">Pakistan</option> <option value="usa">United States of America</option> </select>

Kullanıcılarınızın açılır menüden birden çok alan seçmesini istiyorsanız, <select id=”country” name=”country” multiple> ifadesinin sonundan önce birden çok alan kullanın, aşağıdaki örneğe bakın.

 <label for="country">Select more than 1 country hold CTRL:</label> <select name="country" multiple> <option value="japan">Japan</option> <option value="england">England</option> <option value="pakistan">Pakistan</option> <option value="usa">United States of America</option> </select>

Veri listeleri

Veri listesi veya html'deki veri listesi, yeni HTML öğesi türüdür. Hangi tüm modern tarayıcılar tarafından desteklenir. Aslında açılır menüyü sunmanın gelişmiş bir yolu. Yüzlerce seçilebilir seçeneğiniz olduğunda ve kullanıcılarınızın otomatik tamamlama için birkaç kelime girmesini veya seçim alanında olmayan bir şey göndermesini istediğinizde, veri listeleri kullanışlıdır. Aşağıdaki örneğe bakın.

 <label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser"> <datalist> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Radyo

Radyo giriş tipi aslında bir seçim çemberidir. Kullanılabilir çeşitli seçeneklerden kullanıcı yalnızca bir seçenek seçebilir. Radyo girişleri çoğunlukla sadece birkaç seçim olduğunda kullanılır. Örneğin, kullanıcınıza Cinsiyetini sormak istiyorsanız, radyo sadece 1 cinsiyet seçeneğinin seçilmesine izin verecek iyi bir seçim olabilir. Örneğe bakın

 <label for="gender">Select Gender</label> <input type="radio" name="gender" value="male" /> Male <br> <input type="radio" name="gender" value="female" /> Female <br> <input type="radio" name="gender" value="n/a" /> Don't wanna tell <br>

onay kutusu

Kullanıcınızın birden fazla seçenek seçebileceğini düşündüğünüzde onay kutuları kullanılır. Örneğin bir ürün için buz dahil, çikolata dahil, ambalaj dahil olmak üzere 3 eklenti vardır. Bu tür seçimler en iyi giriş onay kutuları ile yapılır. Örneğe bakın.

 <label for="addons">Select Drink Addons</label> <input type="checkbox" value="ice" name="addons" /> Ice <br> <input type="checkbox" value="chocolate" name="addons" /> Chocolate <br> <input type="checkbox" value="packing" name="addons" /> Packing <br>

Gönder düğmesi

Gönder düğmesi elbette önemlidir, gönder düğmesi olmadan kullanıcı formu gönderemezdi. Evet, enter'a tıklayarak gönderebilirler ve formu göndermek için başka javascript yöntemleri de vardır. Ama yine de düğme kolay ve anlaşılır bir şey. Gönder düğmesi çok kolay olabilir. Değerin aslında düğmenin etiketi olduğu. Aşağıdaki örneğe bakın. Giriş türü gönderme aslında göndermek için bir düğme yapar.

 <input type="submit" value="Send Message!" />

Giriş Tipi Sıfırlama

<input type="reset"> , tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar. Bu, Gönder düğmesi gibidir, ancak formu göndermek yerine sıfırlamak için çalışır.

 <input type="reset" value="Reset Form" />

Bir HTML formunun çalışma örneği

Umarım şimdi HTML formlarıyla ilgili anlayışınızı güzel bir şekilde oluşturmuşsunuzdur. Şimdi tam bir formun çalışan örneğini eyleme geçirme zamanı. Bu basit bir formdur, ancak tam bir formun nasıl oluşturulacağını size bildirecektir.

 <form method="get" action="thankyou.html"> <table align="center"> <tr> <td>Full Name</td> <td> <input type="text" value="" placeholder="Enter name here ..." /> </td> </tr> <tr> <td>Telephone</td> <td> <input type="tel" value="" placeholder="Enter phone ..." /> </td> </tr> <tr> <td>Email</td> <td> <input type="email" value="" placeholder="your email ..." /> </td> </tr> <tr> <td> <lable for="password">Password</lable></td> <td> <input type="password" name="password" value="" placeholder="Enter name here ..." /> </td> </tr> <tr> <td>Message</td> <td> <textarea placeholder="Your message here.."></textarea> </td> </tr> <tr> <td>Your City</td> <td> <select> <option value="">Select your location</option> <option value="lahore">Lahore</option> <option value="sialkot">Sialkot</option> </select> </td> </tr> <tr> <td>Your Gender</td> <td> Male: <input type="radio" name="yourGender" value="male" /> <br> Female: <input type="radio" name="yourGender" value="female" /> <br> Not Knonw: <input type="radio" name="yourGender" value="not_known" /> <br> </td> </tr> <tr> <td>Accept terms?</td> <td> Yes I do: <input type="checkbox" name="acceptTerms" value="1" /> </td> </tr> <tr> <td colspan="2"><input type="submit" value="Send my message" /></td> </tr> </table> </form>

Çözüm

Şimdi olduğu gibi, çevrimiçi arama yapmaktan çevrimiçi oturum açmaya kadar biliyoruz. Veya bir makale yazmak için sosyal medya durumunuzu yayınlamak. Bir yorum göndermek veya bir satın alma formunun kişisel bilgilerini göndermek. Her şey HTML formlarıyla ilgilidir, bu yüzden neredeyse her şeyi bilmeniz çok önemlidir. HTML'nin pro kullanımı için temel kullanımı anlamak çok önemlidir. Ayrıca HTML'den verilerin nasıl yakalanacağı, sunucu tarafı komut dosyası dillerine dayanmaktadır. Bunu daha sonra ele alacağız, ancak şimdilik HTML veya Web formlarıyla ilgili neredeyse tüm HTML'yi bildiğinizden emin olun. Ayrıntılı tanıtım için lütfen aşağıdaki videoyu izleyin.

HTML eğitiminde Formların tam kaynak kodunu almak istiyorsanız, lütfen aşağıdaki bağlantıdan indirin.

Basit HTML form örneğini görüntüleyin: Formlara Giriş

Kaynak Kodunu İndirin : Zip Dosyasını İndirin

Önceki Dersi Görüntüle: HTML'de Tablolar – HTML Eğitimi – Web Uygulaması Geliştirme