Çerçeveler, tablolar ve formlar oluşturma

<form> </form>

textFormumuza tek satırlık yazı yazılabilecek alan eklemek için kullanılır.
Adı:
Soyadı:
Adı: <input type="text" name="firstname"><br><br /> Soyadı: <input type="text" name="lastname">
password
Formumuza parola yazılabilecek alan eklemek için kullanılır. "text" elemanından farklı olarak bu alana girilen her karakter * ile gösterilir.
Kullanıcı:
Parola:
Eposta adresiniz:
Kullanıcı: <input type="text" name="username"><br><br /> Parola: <input type="password" name="password">Eposta adresiniz: <input type="text" name="email"><br>
checkbox

Formumuza onay kutuları eklemek için kullanılır.

HTML PHP MySQL
<input type="checkbox" name="kutu1" checked="on"> HTML<br><br /> <input type="checkbox" name="kutu2"> PHP<br><br /> <input type="checkbox" name="kutu3"> MySQL
radio

Formumuza radyo düğmeleri eklemek için kullanılır.

Erkek
Dişi
<input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br><br /> <input type="radio" name="cinsiyet" value="disi"> Dişi
file

Formumuza dosya ismi giriş alanı eklemek için kullanılır.

<input type="file">
submit, reset, button, image
Formumuzda belirtilen bilgileri ilgili dosyaya yollamak için kullanılacak düğmeler yerleştirmek için kullanılır. Submit formu kabul eder ve yollar, reset ise girilen bilgileri sıfırlar. Button ve image herhangi bir amaçla kullanmak içindir. Diğer ikisi gibi öntanımlı bir davranışı olmayan, gerçekleştireceği eylem bir betikle tanımlanabilen düğmelerdir. Image ile oluşturulan düğme srcparametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur.

<input type="submit" value="Send"> <input type="reset" value="Sıfırla">

<select> </select>, <optgroup> </optgroup>, <option> </option>

<select> etiketi seçim listesi oluşturmakta kullanılır. <option> etiketi ile liste öğeleri belirtilir. <optgroup> etiketi ise bu liste elemanlarını konularına göre gruplamakta kullanılır. Bir select etiketi en azından bir option etiketi içermeli ve optgroup etiketleri iç içe olmamalıdır.

Tek veya çok seimli (multiple parametresi ile), sabit (size parametresi ile) veya aşağıya açılan listeler oluşturulabilir.

Tek seçimli aşağıya açılan liste örneği:

Windows 9x Windows NT Linux UNIX OS/2 MacOS
<select name="os_type"><br /> <option value="win">Windows 9x</option><br /> <option value="winnt">Windows NT</option><br /> <option value="linux">Linux</option><br /> <option value="unix">UNIX</option><br /> <option value="os2">OS/2</option><br /> <option value="macos">MacOS</option><br /> </select>
Hiçbiri Tarhana Ezogelin İşkembe İmambayıldı Sultanbeğendi Kadınbudu Kazandibi Tavukgöğsü Keşkül
<select name="menu" multiple><br /> <option selected="" value="none">Hiçbiri</option><br /> <optgroup label="Çorbalar"><br /> <option value="c1">Tarhana</option><br /> <option value="c2">Ezogelin</option><br /> <option value="c3">İşkembe</option><br /> </optgroup><br /> <optgroup label="Yemekler"><br /> <option value="y1">İmambayıldı</option><br /> <option value="y2">Sultanbeğendi</option><br /> <option value="y3">Kadınbudu</option><br /> </optgroup><br /> <optgroup label="Tatlılar"><br /> <option value="t1">Kazandibi</option><br /> <option value="t2">Tavukgöğsü</option><br /> <option value="t3">Keşkül</option><br /> </optgroup><br /> </select>

<textarea> </textarea>

İngilizce “metin alanı” anlamına gelen bu kelime formumuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır. Örnek aşağıdaki bölümde verilmiştir.

<fieldset> </fieldset>, <legend> </legend>

Form elemanlarını konularına göre gruplamak için kullanılan etiketlerdir. Formun alaşılırlığını arttırması ve kullanımını kolaylaştırması bakımından çok faydalıdır. <legend> etiketi gruplanmış elemanlara bir başlık oluşturur. Aşağıda bir hasta kartı örnek olarak verilmiştir.

Kişisel Bilgiler

Adı:

Soyadı:
Adresi:

Tıbbî Geçmişi

Boğmaca
Kabakulak
Kızamık
Suçiçeği

İlaç Tedavisi

Halen kullanmakta olduğunuz ilaçlar var mı?
Evet
Hayır
Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve
günlük dozlarını belirtiniz:

<fieldset> <legend>Kişisel Bilgiler</legend><br/><br /> Adı: <input name="personal_fname" type="text" size="20" tabindex="1"/> <br /> Soyadı: <input name="personal_lname" type="text" size="25" tabindex="2"/><br/><br/><br /> Adresi: <input name="personal_address" type="text" size="55" tabindex="3"/><br/><br/><br /> <!-- ...diğer kişisel bilgiler... --><br /> </fieldset> <fieldset> <legend>Tıbbî Geçmişi</legend><br/><br /> <input name="gecirilen_hastalik" type="checkbox" value="bogmaca" tabindex="20"/> Boğmaca <br /> <input name="gecirilen_hastalik" type="checkbox" value="kabakulak" tabindex="21"/> Kabakulak <br /> <input name="gecirilen_hastalik" type="checkbox" value="kizamik" tabindex="22"/> Kızamık <br /> <input name="gecirilen_hastalik" type="checkbox" value="sucicegi" tabindex="23"/> Suçiçeği<br/><br/><br /> <br /> <!-- ...tıbbi geçmişi ile ilgili diğer... --><br /> </fieldset> <fieldset> <legend>İlaç Tedavisi</legend><br/><br /> Halen kullanmakta olduğunuz ilaçlar var mı?<br/><br /> <input name="medication_now" type="radio" value="Evet" tabindex="35"/> Evet <br /> <input name="medication_now" type="radio" value="Hayir" tabindex="35"/>Hayır<br/><br/><br /> <br /> Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve<br /> günlük dozlarını belirtiniz:<br/><br /> <textarea name="kullandigi_ilaclar" rows="10" cols="60" tabindex="40"