Altın Konu HTML'de Form Nasıl Oluşturulur?

[Replicant]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

​

Bir web sitesi kullanıcısından veri toplamak birkaç farklı yolla yapılabilir. Web sitelerindeki formlar, bir kullanıcıyı bir bültene abone olmak gibi basit bir işleve veya bir iş başvuru formu olarak hareket etmek gibi daha karmaşık bir amaca sahip olabilir.

Ancak, tüm bu basit ve karmaşık formların ortak noktası HTML ve daha özel olarak HTML <form> etiketidir.

Form Etiketini Kullanma​

<Form> etiketi formları için yapı taşları olarak kabul edilebilir diğer elemanlarını içerecek bir kap olarak kullanılan bir HTML elemanıdır. Bu temel öğelerden bazıları <label> etiketini, <input> etiketini ve <button> etiketini içerir.

<Form> etiketi işlevselliği katkıda bulunduğunu önemli bir özelliği vardır. Bu özniteliğe “action” adı verilir ve forma girilen verilerin aktarılacağı dosyayı tanımlamak için kullanılır.

<form> Etiket Örneğinin Kullanılması​

<!-– A form that will pass its data to a javascript document called process.js-->
<form action="process.js">
<!--close form tag-->
</form>

Yukarıdaki örnek, projelerinizde form etiketinin nasıl kullanılacağını gösterir. Ana çıkarımlardan biri, bir form etiketi açarsanız kapatmayı hatırlamanız gerektiğidir. Bu bir form yapısı oluşturacak ve ayrıca forma girilen verilerin doğru bir şekilde işlenmesini sağlayacaktır.

<label> Etiketini Kullanma​

<Label> etiketi bir formda her giriş alanına verileri tanımlamak için kullanılır. Bu etiket, formun işlevselliğini geliştirmek için kullanılan bir for niteliğine sahiptir .

İlgili giriş alanına atanan kimlik , <label> etiketindeki for değeriyle eşleşirse, etikete tıkladığınızda bu giriş alanı otomatik olarak vurgulanacaktır.

<label> Etiket Örneğinin Kullanılması​

<!—using the label tag-->
<label for="fname">First Name:</label>

Yukarıdaki örnekte for niteliğine fname değerinin atandığını görebilirsiniz . Eğer bir giriş alanı oluşturmak nedenle, fname id, bu alan tıkladığınız her zaman vurgulanır İlk İsim etiketi.

<input> Etiketini Kullanma​

En temel biçiminde <input> etiketi bir metin kutusu olarak görülebilir. <İnput> etiketi yakalar kullanıcıdan verileri ve onun daha önemli özelliklerinden biridir tip özelliği. Tipi özelliği, bu metin kutusu toplayabilir veri türünü gösterir.

type niteliğine atayabileceğiniz birkaç farklı değer vardır , ancak daha popüler olanlardan bazıları aşağıdaki gibidir.

• Metin
• Numara
• E-posta
• resim
• Tarih
• onay kutusu
• Radyo
• Parola

<input> etiketini kullanma Örnek​

<!—using the label and input tags-->
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname">

<İnput> kodunda etiket yukarıdaki her benzersiz bir işlevi olduğunu, üç farklı özellikleri vardır. Tip özellik metin kutusu sadece karakterleri kabul anlamına gelir bir metin değeri atanır.

İd niteliği metin kutusu için benzersiz bir tanımlayıcı olduğunu ve CSS dosyasından bu elemana erişim sağlar çünkü önemli. Adı özniteliği benzersiz bir tanımlayıcı olduğu; ancak name niteliği, geliştirmenin sunucu tarafındaki bir öğeyle etkileşim kurmak için kullanılır.

İd ve adı bir istemci tarafında bir unsuru ve sunucu tarafında diğer erişim sağlar olarak nitelikleri genellikle aynı değeri atanır.

Onay Kutusu Öğesini Kullanma​

Onay kutusu öğesi, <input> etiketiyle kullanabileceğiniz diğer öğelere kıyasla çok benzersizdir . Kullanıcının ilgili seçenekler listesinden bir veya daha fazla seçenek seçmesine olanak tanır. Onay kutuları, seçildiğinde bir onay içeren küçük kare kutularla temsil edildikleri için kolayca tanımlanır.

Onay Kutusu Öğe Örneğinin Kullanılması​

<!-using the checkbox value-->
<label for="Languages">Programming Languages:</label>
<input type="checkbox" name="languages" id="languages" value="Java"> Java
<input type="checkbox" name="languages" id="languages" value="JavaScript"> JavaScript
<input type="checkbox" name="languages" id="languages" value="Python"> Python

Yukarıdaki örnekte, onay kutusu öğelerinin her birinin bir değer özniteliği vardır ve bu, her bir onay kutusu seçeneğini koleksiyondan ayırt etmeye yardımcı olduğu için önemlidir. Bu nedenle, bir kullanıcı yukarıdaki seçeneklerden "Java"yı seçerse, veriler bunu yansıtacaktır.

<select> Etiketini ve Radyo Öğelerini Kullanma​

<Select> etiketi ve radyo elemanları sadece bir kullanıcı bir seferde tek bir değeri seçmesi anlamında benzer; bu nedenle, aynı işleve sahip oldukları söylenebilir. Ancak görünüş olarak çok farklılar.

Radyo elemanı görünüşte onay kutusu elemanına daha yakındır, ancak radyo elemanı ile kareler yerine daireleriniz olur.

<Select> etiketi aslında bir kullanıcının tek bir değer seçmenize olanak tanıyan bir açılan kutu, ne üretir.

<select> Etiketini ve Radyo Öğesini Kullanma Örneği​

<!-using the select tag-->
<label for="sex">Sex:</label>
<select name= "sex" id="sex">
<option value="male" selected>Male</option>
<option value="fmale">Female</option>
<option value="other">Other</option>
</select>
<!-using the radio element-->
<label for="positions">Positions Available:</label>
<input type="radio" name="positions" id="positions"
value="Junior Developer"> Junior Developer
<input type="radio" name="positions" id="positions"
value="Mid-level Developer"> Mid-level Developer
<input type="radio" name="positions" id="positions"
value="Senior Developer"> Senior Developer

Tarih Öğesini Kullanma​

Tarih öğesi, tıklandığında bir takvim oluşturan küçük bir metin kutusu oluşturur. Kullanma tarihi potansiyel potansiyel hatalı verilerin toplanmasına yol açabilir yanlış bir tarih, giren bir kullanıcı karşı formları önlemler bir giriş türü olarak.

Tarih Öğesi Örneğinin Kullanılması​

<input type="date" name="dob" id="dob">

E-posta ve Parola Öğesini Kullanma​

Bir geliştirici, bir <input> etiketinin type niteliğine e-posta veya parola değerlerini atadığında , her biri aynı metin kutusu üretir. Ancak bu kutuları kullanmaya başladığınızda farklar ortaya çıkıyor.

E-posta öğesi, metin kutusuna girilen verileri izler ve her gönderimin bir e-posta adresinin standart gereksinimini karşılamasını sağlar; bu, yerel bir bölüme sahip olmak, ardından @ sembolüne sahip olmak ve bir etki alanı ile biten anlamına gelir.

E-posta Öğesini Kullanma Örneği​

<input type="email" name="email" id="email" placeholder= "Enter email address" >

Yukarıdaki örnekte yer tutucu adlı yeni bir öznitelikle tanıştınız ve bu öznitelik, metin kutusunda soluk gri olarak görüntülenen bir metin değeri alır. Bu metin, yukarıdaki örnekte görüldüğü gibi metin kutusuna yerleştirilecek verileri belirtmek için kullanılır.

Parola öğesi, metin kutusuna girilirken karakterleri yıldızlara dönüştürür. Bu nedenle, bilgisayar ekranınız başkaları tarafından görülüyorsa, girdiğiniz şifreyi görmezler.

Parola Öğesini Kullanma Örneği​

<input type="password" name="pword" id="pword">

Düğme Etiketini Kullanma​

Bir formda, genellikle iki farklı düğme türü vardır. Birincisi, forma girilen verileri action niteliğine atanan değere ( < form> etiketinde bulunur) gönderen gönder düğmesidir .

Gönder Düğmesi Örneği​

<button class="btn" type="submit">Submit</button>

Genellikle bir formda kullanılan ikinci düğme türü, kullanıcının yeni veriler girebilmesi için formdaki verileri temizleyen sıfırlama düğmesidir. <Düğmesi> etiketi vardır tip düğmesinin işlevini belirtmek için kullanılan özelliği. Yukarıdaki örnekte type niteliğine gönder değeri atanmıştır , bu nedenle, formu sıfırlamak için tür değeri sıfırlama olan bir düğme kullanılır.

Sıfırlama Düğmesi Örneği​

<button class="btn" type="reset">Reset</button>

Form Oluşturma​

HTML'de basit bir form oluşturmak için yukarıda bahsedilen tüm öğeleri bir <form> etiketi içine almanız gerekir .

Form Örneği Oluşturma​

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<div id="container">
<h1>Application Form</h1>
<br>
<form action="process.js">
<div>
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname">
<label for="lname" >Last Name:</label>
<input type="text" name="lname" id="lname">
</div> <br>
<div>
<label for="dob">Date of birth:</label>
<input type="date" name="dob" id="dob">
<label for="age">Age:</label>
<input type="number" name="age" id="age">
</div> <br>
<div>
<label for="gender">Gender:</label>
<select name= "gender" id="gender">
<option value="male" selected>Male</option>
<option value="fmale">Female</option>
<option value="other">Other</option>
</select>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" placeholder= "Enter email address" >
</div> <br>
<div>
<label for="positions">Positions Available:</label>
<input type="radio" name="positions" id="positions"
value="Junior Developer"> Junior Developer
<input type="radio" name="positions" id="positions"
value="Mid-level Developer"> Mid-level Developer
<input type="radio" name="positions" id="positions"
value="Senior Developer"> Senior Developer
</div> <br>
<div>
<label for="Languages">Programming Languages:</label>
<input type="checkbox" name="languages" id="languages" value="Java"> Java
<input type="checkbox" name="languages" id="languages" value="JavaScript"> JavaScript
<input type="checkbox" name="languages" id="languages" value="Python"> Python
</div> <br>
<div>
<label for="pword">Password:</label>
<input type="password" name="pword" id="pword">
<label for="cpword">Confirm Password:</label>
<input type="password" name="cpword" id="cpword">
</div> <br>
<button class="btn" type="submit">Submit</button>
<button class="btn" type="reset">Reset</button>
</form>
</div>
</body>
</html>

Artık HTML'de Basit Bir Form Oluşturabilirsiniz​

Bu makale, işlevsel bir HTML formu oluşturmak için tüm araçları sağlar. Form oluşturmada kullanılan farklı HTML etiketlerini tanımlar ve bu etiketlerle kullanılabilecek farklı nitelikleri araştırır.

Ancak, web sitelerinde gördüğünüz çoğu formun ek bir bileşeni vardır; Forma hayat vermek ve daha estetik hale getirmek için kullanılan CSS.