Forms

Kategori: HTML , 27 Ekim 2019 , JanFranco


HTML'de formlar oluşturabilmek için form etiketini kullanırız. form etiketinin iki önemli attribute'ı mevcut: action ve method. action attribute'ına form'u sunucuya göndereceğimiz url'yi yazmamız gerekir. method attribute'ına ise get ve post değerlerini atayabiliriz. get methodunu kullanırsak, formda girilen değerler url ile birleştirilir. janfranco.com/search.php?word=janfranco gibi. Bu methodu formlarımız kısaysa kullanmalıyız. post methodunda ise formdaki değerler direk sunucuda kaydedilir. Bu methodu formlarımız uzun ise, bir dosya vs. yüklediğimzde veya veritabanını etkileyecek formlar yazdığımızda kullanmalıyız.

Form yapısından bahsettim. Şimdi formlara ekleyebileceğimiz elementlerden bahsedeyim. Formlara ekleyebileceğimiz en basit yapı text girişidir. input etiketi ile tanımlanırlar. type, name, size ve maxlength olmak üzere dört attribute'a sahiptirler. type attribute'ını "text" veya "password" olarak belirleyebiliriz. Eğer "password" değerini seçersek, input girilirken, girilen text gizlenir. name attribute'ı text girişinin adıdır. Sunucu için için önemlidir. size attribute' ı ile text girişlerinin boyutunu, maxlength ile girilebilecek maksimum text'i belirleyebiliriz. Bir örnek yapalım:


<form action="http://www.janfranco.com/register.php">
	<p>Username:
	<input type="text" name="username" size="15"
	maxlength="30" />
	</p>
	<p>Password:
	<input type="password" name="password" size="15"
	maxlength="30" />
	</p>
</form>
html-forms

Burada url örnek olarak verilmiştir. Tek bir kutucuk yerine çoklu satırlı text girişi için textarea etiketi ile metin kutuları oluşturabiliriz. cols ve rows attribute'ları ile boyutu belirleyebiliriz. Ayrıca etiketler arasına yazı yazarak default olarak text bulundurabiliriz:


<form action="http://www.janfranco.com/comments.php">
	<p>What did you think?</p>
	<textarea name="comments" cols="20" rows="4">Enter
	your comments...</textarea>
</form>
html-forms

Radio button tanımlamak için input etiketini kullanabiliriz. type attribute'ını "radio" olarak belirlemeliyiz. value attribute ile kullanıcının seçtiği radio button'u sunucuya gönderebiliriz. checked attribute ile default olarak seçili radio button'lar üretebiliriz. Bir örnek yapalım:


<form action="http://www.janfranco.com/profile.php">
	<p>Please select your favorite genre:
	<br />
	<input type="radio" name="genre" value="rock" checked="checked" /> 
	EDM
	<input type="radio" name="genre" value="pop" />
	House
	<input type="radio" name="genre" value="jazz" />
	TECHNO
	</p>
</form>
html-forms

Checkbox tanımlamak için yine input etiketini kullanabiliriz. type attribute'ını "checkbox" olarak belirlememiz gerekir:


<form action="http://www.janfranco.com/profile.php">
	<p>Please select your favorite music service(s):
	<br />
	<input type="checkbox" name="service"
	value="itunes" checked="checked" /> iTunes
	<input type="checkbox" name="service"
	value="lastfm" /> Last.fm
	<input type="checkbox" name="service"
	value="spotify" /> Spotify
	</p>
</form>
html-forms

Tıkladığımızda aşağı doğru açılan listeleri select etiketi ile tanımlayabiliriz. Her bir elementi de option etiketi ile oluşturabiliriz. Bir örnek yapalım:


<form action="http://www.janfranco.com/profile.php">
	<p>What device do you listen to music on?</p>
	<select name="devices">
		<option value="ipod">iPod</option>
		<option value="radio">Radio</option>
		<option value="computer">Computer</option>
	</select>
</form>
html-forms

Çoklu seçmeli kutuları da select ile tanımlayabiliriz:


<form action="http://www.janfranco.com/profile.php">
	<p>Do you play any of the following instruments?</p>
	<select name="instruments" size="3" multiple="multiple">
		<option value="guitar" selected="selected">
		Guitar</option>
		<option value="drums">Drums</option>
		<option value="keyboard"
		selected="selected">Keyboard</option>
		<option value="bass">Bass</option>
	</select>
</form>
html-forms

Sunucuya dosya yükletebilmek için input etiketini kullanabiliriz. type attribute'ını "file" olarak belirlersek kullanıcıya dosya seçtirebiliriz:


<form action="http://www.janfranco.com/upload.php" method="post">
	<p>Upload an img:</p>
	<input type="file" name="user-img" /><br />
	<input type="submit" value="Upload" />
</form>
html-forms

Form doldurulduğunda, formu sunucuya göndermek için bir submit butonu kullanırız. Bu butonu da input etiketi ile oluşturabiliriz. type attribute'ının değerini "submit" olarak atamamız gerekir:


<form action="http://www.janfranco.com/subscribe.php">
	<p>Subscribe to our email list:</p>
	<input type="text" name="email" />
	<input type="submit" name="subscribe" value="Subscribe" />
</form>
html-forms

label etiketleri ile elementlere açıklama ekleyebiliriz:


<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender"
value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender"
value="m">
<label for="male">Male</label>
html-forms

Formdaki elementleri fieldset etiketi ile bir arada bir bütün halinde tutabiliriz:


<fieldset>
	<legend>Contact details</legend>
	<label>Email:<br />
	<input type="text" name="email" /></label><br />
	<label>Mobile:<br />
	<input type="text" name="mobile" /></label><br />
	<label>Telephone:<br />
	<input type="text" name="telephone" /></label>
</fieldset>
html-forms

Bilgiler eksik veya hatalı girildiğinde, required attribute ile uyarı mesajları verdirtebiliriz:


<form action="http://www.janfranco.com/login" method="post">
	<label for="username">Username:</label>
	<input type="text" name="username" required="required" /><br />
	<label for="password">Password:</label>
	<input type="password" name="password" required="required" />
	<input type="submit" value="Submit" />
</form>
Tarih seçimi için input etiketinin type attribute'ını "date" olarak atayabiliriz:


<form action="http://www.janfranco.com/book.php" method="post">
	<label for="username">Departure date:</label>
	<input type="date" name="depart" />
	<input type="submit" value="Submit" />
</form>
html-forms

Arama çubukları için özel olarak type attribute'ını "search" olarak belirterek elementler oluşturabiliriz. Ayrıca placeholder attribute'ı ile arama çubuğunda default bir yazı belirleyebiliriz:


<form action="http://www.janfranco.com/search.php">
	<p>Search:</p>
	<input type="search" name="search" />
	<input type="submit" value="Search" />
</form>

<form action="http://www.janfranco.com/search.php">
	<p>Search:</p>
	<input type="search" name="search" placeholder="Enter keyword" />
	<input type="submit" value="Search" />
</form>
html-forms


Sonraki Yazı: Extra
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın