Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
html kodları ile basit form yapısı
#1
Hemen her sitede işe yarıyabilecek türden bir method.Fake sitel yapımında veya ankat olur oylama gibi konularda işe yariyacak türden bir method.

<form>:
Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen kontroller
input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği
form etiketinin içinde gösterilir,<form> tagı <body> tagının içine yazılır.

Genel kullanımı:

<FORM ACTION="url" METHOD="get- post" TARGET="pencere"> ….. </FORM>

Action:
Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu gösterir.

Method:
Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir.
GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip
değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak değerlendiriciye
yönlendirir.

Target:
Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede
belireceğini gösterir.

<input>:
Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde
belirtilerek farklı girdilerin alınmasını sağlar.

Genel kullanımı:

<INPUT ALIGN=tip [CHECKED] MAXLENGTH="uzunluk" NAME="isim"
SIZE="boyut" SRC="adres" TYPE="tip" VALUE="değer">

ALIGN:
Elemanın form üzerinde nasıl konumlanacağını belirtmek için
kullanılır (left, center, right). Eğer type değeri bir resim olarak
atanırsa bir sonraki satırın resme göre nasıl yerleştirileceğini
belirler. Top, middle veya bottom değerlerinden birini alabilir.

CHECKED:
Kontrol olarak bir işaretleme veya seçim kutusu
kullanıldığında CHECKED değeri bu kutuların işaretlenmiş
olarak karşımıza gelmesini sağlar.


MAXLENGTH:
“text” ve “password” elemanlarında girilebilecek en çok
karakter sayısını belirtmek için kullanılır. Öntanımlı değeri
sınırsızdır

NAME:
Girilen verinin hangi değişken ismi altında
değerlendirileceğini belirtmek için kullanılır. Mutlaka
belirtilmelidir.

SIZE:
“text” ve “password” elemanlarında karakter sayısını,
diğerlerinde ise piksel cinsinden genişliği belirtmek için
kullanılır.

SRC:
"image" elemanında resim dosyasını belirtmek için kullanılır.

TYPE:
Eleman türü belirtilir. text, password, checkbox, radio,
submit, reset, file, hidden, image, button değerlerinden biri
kullanılır.

Form'umuzun genel yapısı ,mantığı,kullanımı bu şekildedir.Şimdide Formumuzda kullanılacak nesnelerimizi anlatacağım.

CheckBox:
Formumuza onay kutuları eklemek için kullanılır.Birden fazla seçenek seçme imkanı sunar.

Kullanımı:

<HTML><body >
<FORM ACTION=' http://internet/form' METHOD=POST>
<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL
</FORM></body></HTML>

Bu kodlarımızda aldığımız dersleri istemiş bizden ve 3 seçenek sunmuş.Biz istediğimiz bu 3 seçenekten birini veya ikisini veya kaç seçeneğimiz varsa o kadarını seçebiliriz.

Radio:
Radio buton ise kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup
içindeki radio kontrolleri her zaman aynı ismi taşımalı, değerleri ise value değerine
atanmalıdır.

Kullanımı:

<HTML><body >
<FORM ACTION=' http://internet/form' METHOD=POST>
<input type="radio" name="kutu" value="1"> HTML<br>
<input type="radio" name="kutu" value="2"> PHP<br>
<input type="radio" name="kutu" value="3"> MySQL</FORM>
</body></HTML>

Bu kodlarımızda aldığımız dersleri istemiş bizden ve 3 seçenek sunmuş.Bize sunulan bu 3 seçenekten sadece bir tanesini seçebiliriz.

Text:
Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu
kontrolle birlikte kullanılabilir.Kutucuğumuza en fazla kaç karakter girileceğini biz belirliyebiliriz.

Kullanımı:

Adı: <input type="text" name="firstname"><br>
Soyadı: <input type="text" name="lastname">

Image:
Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar.
Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına
dokunduğu öğrenilebilir. Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu
URL'yi göstermelidir.

Password:
Formumuza parola yazılabilecek alan eklemek için kullanılır. “text” elemanından
farklı olarak bu alana girilen karakter “*” işareti ile gösterilebilir.

Kullanımı:

Parola:
<input type="password" name="password">

Textarea:
Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için
kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır.

Kullanımı:

<textarea name="mesaj" rows="10" cols="50" >
</textarea> <br>

Reset:
Tıklandığında doldurduğumuz formdaki bütün içerikleri temizler.

Kullanımı:

<input type="reset" value="reset">

Submit:
Doldurduğumuz form içeriklerini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı
değiştirilebilir.

Kullanımı:

<input type="submit" value="send">

Kodlarımızı pekiştirmek adına bir uygulama yapalım:

Uygulama kodları:

<html>
<head><title>Form Etiketleri</title><head><body>
<h1> Sanal Sınıf</h1>
<form action="http://pcsistem.net" method="post"><br>
Kullanıcı Adı:<input type="text" name="ad"><br>
E-posta Adresi:<input type="text" name="eposta"><br>
İletmek istediğiniz mesaj varsa aşağıdaki alanı kullanınız.
<textarea name="mesaj" rows="10" cols="50" >
</textarea> <br>
Almış olduğunuz dersleri işaretleyiniz<br>
<input name="ders" type="checkbox" value="programlama" checked="on">
Pascal
<input name="ders" type="checkbox" value="isletim" > İletim Sistemi
<input name="ders" type="checkbox" value="HTML">HTML <br>
<input type="submit" value="send">
<input type="reset" value="reset">
</form>
</body></html>

Ekran görüntüsü:

http://i.hizliresim.com/xYobjw.bmp


Elimden geldiğince düzgün ve anlaşılır biçimde anlatmaya çalıştım.Hatamız olduysa affola.
Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Çok Şık Admin Paneli [HTML + CSS] CyberAngel 38 1,357 11-11-2016, Saat: 14:29
Son Yorum: berat00
  Spastik Menü (css,html) HackLock 26 1,918 04-11-2016, Saat: 12:12
Son Yorum: Cesm-i Dil
  Temel HTML Kodları ve Anlamları KingSkrupellos 1 74 27-08-2016, Saat: 09:37
Son Yorum: H4Sec
  Temel CSS Kodları ve Anlamları KingSkrupellos 0 58 26-08-2016, Saat: 22:44
Son Yorum: KingSkrupellos
  Dark Login Panel [HTML] CyberAngel 9 415 22-08-2016, Saat: 23:35
Son Yorum: Slowycan
Anahtar Kelimeler

html kodları ile basit form yapısı indir, html kodları ile basit form yapısı Videosu, html kodları ile basit form yapısı Online izle, html kodları ile basit form yapısı Bedava indir, html kodları ile basit form yapısı Yükle, html kodları ile basit form yapısı Hakkında, html kodları ile basit form yapısı Nedir, html kodları ile basit form yapısı Free indir, html kodları ile basit form yapısı Oyunu, html kodları ile basit form yapısı Download


1 Ziyaretçi