html

Konu: html C.tesi Şub. 02, 2008 4:35 pm

HTML Nedir?
HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.
Web istemcimizin adres satırına http://www.belgeler.org gibi bir ifade yazarsak sunucu sistem bize, o adresin www kök dizinindeki index.html (ya da hangi giriş sayfası tanımlı ise) dosyasını görüntüleyecektir.

Konu: HTML’nin Yapısı C.tesi Şub. 02, 2008 4:36 pm

HTML’nin Yapısı
Daha öncede söylediğim gibi html dosyaları sadece düz yazı dosyalarıdır. HTML öğrenmesi oldukça basit ve yaratıcılığa fazla açık olmayan bir dildir. Basittir çünkü, internette gezinirken görüntülediğiniz sayfaların hazırlanırken kullanılan teknikleri öğrenmemiz mümkündür (Sayfanın üzerinde farenizin sağ tuşuna bastıktan sonra Kaynağı Görüntüle seçeneği ile). Beğendiğiniz tasarımları kendi sayfanızda kullanabilir, bu tasarımların hangi html kodları kullanılarak yapıldığını öğrenebilirsiniz. Yaratıcılığa fazla açık değil dedim çünkü html ile yazdığınız sayfalar PHP, ASP, ColdFusion, CGI... gibi web programlama dilleri kullanılmadan statik html dışına çıkamaz.
HTML kodlarını yazmak için özel bir düzenleyiciye ihtiyacınız yoktur. Bu iş için Windows altında NotePad ya da DOS-Edit, Linux altında pico, joe ya da vi gibi metin düzenleyicileri yeterlidir. HTML sayfalarınızı kod yazmaksızın FrontPage, Netscape Composer gibi programlarla da hazırlayabilirsiniz. Yalnız bu programlar kullanılarak hazırlanan sayfalar genellikle belli bir çerçeve içinde olduğu için zaten dar olan HTML’nin üreticilik alanını daha da daraltmaktadır. Bunun yanı sıra HTML’yi kod düzeyinde bilmenin kullanıcıya her zaman fayda getireceği de unutulmamalıdır (İleriki bölümlerde değineceğim Dinamik Web Tasarımı için HTML’nin kod düzeyinde bilinmesi gereklidir!).

Konu: HTML Etiketleri C.tesi Şub. 02, 2008 4:37 pm

HTML Etiketleri

1. <html> </html>
2. <head> </head>
3. <body> </body>
4. <title> </title>
5. <center> </center>
6. <hx> </hx> Başlık Etiketleri
7. <b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt>
8. <sub> </sub>, <sup> </sup>
9. <hr>
10. <p> </p> ve <br>
11. <pre> </pre>
12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>
13. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li>
14. <img>
15. <a> </a>
16. <font> </font>
17. <acronym> </acronym>
18. <meta> </meta>
19.

Konu: Basit Bir HTML Dosyası Örneği C.tesi Şub. 02, 2008 4:46 pm

Basit Bir HTML Dosyası Örneği

HTML’ye giriş için bu kodları yeterli olacağını düşünüyorum. Bu bölümde buraya kadar öğrendiğimiz HTML kodlarını kullanarak basit bir sayfa yaptım. Kullanılan kodların nerelerde ve nasıl kullanıldığına dikkat etmenizi öneririm. Sayfanın yapımında göze hitap etmesinden çok öğretici olmasına dikkat ettim.

<html>
<head>

<meta name="author" content="Acemi tasarımcı">
<meta name="description" content="Acemi tasarımcı web okulu">
<meta name="keywords" content="web,html,css">
<meta http-equiv="content" content-type="text/html; charset=iso-8859-9">
<title>İlk HTML Denemem</title>
</head>


<body text="#000000" bgcolor="#ffffff" link="#808080" vlink="#eaeaea" alink="#000000">
<h1> Bu büyük boyutlu ortalanmamı bir başlık</h1>
<br><center>
<h1> Bu da büyük boyutlu bir başlık fakat ortalanmış.</h1>
</center>


<br><br>
<font face="verdana" size="5" color="#800000">
Buradan itibaren paragrafıma başlayacağım.
</font>


<p>
Bu sayfayı yapmaktaki amacım etiketlerin ve bağlı kodların nasıl
kullanıldığını göstermektir. Yukarıdaki kırmızı başlığı <font>
etiketini kullanarak elde ettim. İnternette gezerken ziyaret ettiğiniz
sayfaların kaynağını görüntüleyerek de değişik teknikler öğrenebilirsiniz.
</p>


<a href="mailto:fni18444@gantep.edu.tr">Bana e-mail yollayın</a><br><br>
<br><br>


Aşağıdaki resmin görüntülenmesi için HTML dosyanızın olduğu dizine
<b>abc.png</b> resmini oluşturmalısınız.<br>
<a href="http://www.belgeler.org"><img src="abc.png" border="0"></a>
<br><center>
<hr width=80%>
<u>Bu altı çizili bir yazı</u>, <i>bu yana yatık, italik, bir yazı</i><br>
Bu sayfanın amacı <acronym title="Hyper Text Markup Language">HTML</acronym>
kodları hakkında bilgi vermektir.
<hr width=80%>


</body>
</html>

Konu: Meta Etiketi ile Yönlendirme Örneği C.tesi Şub. 02, 2008 4:47 pm

Meta Etiketi ile Yönlendirme Örneği
Burada <meta> etiketindeki refresh özelliğini kullanarak yönlendirmeye bir örnek verdim.
Sayfada yazılı olan kodları herhangi bir metin düzenleyici içine yapıştırıp dosyaları belirtildiği gibi kaydedin. Daha sonra tek yapmanız gereken ornek_html2.html dosyasını üzerine çift tıklayarak açmak Wink

<html>
<head>
<title>Geçici Sayfa</title>
<! -- meta etiketindeki refresh kodu ile başka bir sayfaya yönlendirme yapılıyor -- >
<meta http-equiv="refresh" content="10;URL=ornek_html2_ana.html">
</head>
<body bgcolor=#334455 text=#eaeaea link=#eaeaea vlink=#eaeaea alink=#808080>
<br><br>
<center>
<h1>
Bu sayfa açıldıktan 10 saniye sonra otomatik olarak aynı dizinde bulunan
<a href="./ornek_html2_ana.html"> ornek_html2_ana.html</a>
dosyasını açacaktır.
</h1>
</center>
</body>
</html>

Yukarıdaki dosya bizim birinci HTML dosyamız. Bu dosya açıldıktan 10 saniye sonra otomatik olarak aşağıdaki dosyayı açması gerekli.

<html>
<head>
<title>Ana Sayfa</title>
</head>

<body bgcolor="#334455" text="#eaeaea">
<center>
<h1>
ornek_html2_ana.html dosyasındasınız.
<br>Yönlendirme başarılı!
</h1>
</center>
</body>
</html>

Konu: Çerçeveler, tablolar ve formlar C.tesi Şub. 02, 2008 4:48 pm

Çerçeveler, tablolar ve formlar

Sayfamıza çerçeve desteği katmak için kullanılan etikettir. Etiketin kullanımına geçmeden önce yabancı olan okuyucular için çerçeve kavramını açıklamak istiyorum. Çerçeve desteği içeren bir sayfa oluşturmak için en az üç tane normal HTML dosyasına ihtiyacımız vardır. Bu üç dosyadan biri hangi HTML dosyalarının çerçeveleri oluşturacağını belirler. Diğer ikisi de çerçeveleri oluşturur. Çerçeve kullanımına en güzel örnek yahoo ve hotmail gibi eposta sunucularının kullanıcı arayüzüdür.

Tablo 1.1. Frameset yardımcı kodları
Girilecek Kod Görevi
cols = "değer" Bir çerçevenin ekrandaki genişliğini verir.
rows = "değer" Bir çerçevenin ekrandaki yüksekliğini verir.
frameborder = "değer" Çerçeveler arasında çizgi olup olmayacağı belirlenir

<br /> <body><br /> <h1>Oppps...Web istemcinizin frame desteği yok!!!!</h1><br /> </body><br />

Yukarıdaki HTML kodlarını index.html adlı bir HTML dosyası içine yazıp dosyayı çalıştırmamız halinde hata ile karşılaşırız. İstemci HTML kodumuzda verilen bilgi doğrultusunda bulunduğumuz dizinde ana.html ve menu.html dosyalarını da arayacaktır. Bu dosyaları yazıp dizine kaydetmemiz halinde istemci penceresinin sol tarafından itibaren 125 piksellik alan etiketi ile belirtilen menu.html dosyasına ayrılacaktır. Frameset etiketi ile birlikte kullanılan frameborder = "0" kodu kullandığımız çerçeveler arasında çerçeve çizgisi oluşması engellenecektir.
etiketi da frameset etiketi içerisinde yardımcı etiket olarak kullanılır. Kullanacağımız çerçeve sayfalarını ve özelliklerini belirlemek için kullanırız.
name = "ad" kodu ile kullandığımız çerçeveye bir isim veririz. Bu isim sayesinde target = "hedef" yardımcı kodu ile belirtilen sayfada bir bağa tıklandığı zaman açılacak yeni sayfanın yeri belirlenir.
scrolling = "auto" kodu kaydırma çubuğu için kullanılır.
etiketi, eğer ziyaretçinin istemcisinin frame desteği yoksa ziyaretçiye görüntülenecek sayfayı belirlemede kullanılır. Daha çok eski ve Linux altında kullanılan metin tabanlı istemcilerde frame desteği yoktur. <br />Son olarak da frame etiketi ile birlikte kullanılan src = "dosya adı" koduna gelmek istiyorum. Tahmin ettiğiniz gibi frame için kullanılacak sayfayı belirlemede kullanılır. <br /><frameset rows=”125,*” frameborder=”0”><br /><frame name=”menu” target=”ana” src=”menu.html” scrolling=”auto”><br /><frame name=”ana” src=”ana.html” scrolling=”auto”><br /> <noframes><br /> <body><br /> <h1>Oppps...Web istemcinizin frame desteği yok</h1><br /> </body><br />

Yukarıdaki kod kümesi de ilkinden farklı olarak sayfaları yahoo.com'daki gibi değil de biri yukarıda diğeri de onun aşağısında olacak şekilde konumlandırılır. Sayfanın ilk 125 pikseli ilk dosyaya geri kalanlar da diğer dosyaya ayrılır.

Konu: Çerçeveler, tablolar ve formlar(2) C.tesi Şub. 02, 2008 4:50 pm

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodları aşağıda tanımladım.
Tablo 1.2. Table etiketi yardımcı kodları
Girilecek Kod Görevi
border = "değer" Tablonun kenarlığının varlığını belirler.
width = "değer" Tablonun genişliği belirlenir.
height = "değer" Tablonun yüksekliği belirlenir.
bgcolor = "renk" Tablonun zemin rengi belirlenir.
cellpadding = "değer" Tablo gözeleri içindeki öğelerin tablo kenarlıklarına uzaklığı belirlenir.
cellspacing = "değer"

Bu kodları verdikten sonra basit bir tablo örneği vermek istiyorum. Verdiğim örnekte table etiketi dışında başka etiketlerde kullandığıma dikkat edin.
<table border="1" bgcolor="#aabbcc">
<tr>
<td bgcolor="#f80000">Burada bir yazı var</td>
<td>Burası da başka bir göze.</td>
</tr>
</table>

Burada bir yazı var Burası da başka bir göze.

Yazdığım kodları dikkatli bir şekilde incelemişseniz, <tr> ile satır başlangıcı ve <td> ile sütun başlangıcı yaptığımızı fark etmişsinizdir. Yani her <tr> etiketi bize bir satır açar ve biz <td> etiketi ile bu satıra sütunlar yerleştiririz. Daha sonra </tr> etiketi ile satır bitirilir. Yukarıdaki tabloya bir satır daha eklemek için aşağıdaki gibi bir kod kümesi kullanırız.
<table border="1" bgcolor="#aabbcc">
<tr>
<td bgcolor="#f80000">Burada bir yazı var</td>
<td>Burası da başka bir göze.</td>
</tr>

<tr>
<td bgcolor="#00f800" width="50%">İkinci satırın ilk sütunu</td>
<td>İkinci satırın ikinci sütunu</td>
</tr>
</table>

Burada bir yazı var Burası da başka bir göze.
İkinci satırın ilk sütunu İkinci satırın ikinci sütunu

Yukarıdaki kod kümesi bize iki satırlı bir tablo verecektir. <td> etiketi ile birlikte width, bgcolor gibi özelliklerin kullanılabildiğine dikkat edin.
Peki ya iki sütunluk bir satır ya da iki satırlık bir sütun yapacaksak nasıl yapacağız? Aşağıdaki kodları incelerseniz sorunuza cevap bulabilirsiniz.
<table border="1" bgcolor="aabbcc" width="80%">
<tr>
<td bgcolor="#f80000">Burada bir yazı var</td>
<td>Burası da başka bir göze.</td>
</tr>

<tr>
<td bgcolor="#00f800" width="50%">İkinci satırın ilk sütunu</td>
<td>İkinci satırın ikinci sütunu</td>
</tr >

<tr>
<td colspan="2">
<center>
Tablomuz iki sütunluk olmasına rağmen, burada iki sütunluk bir satır var.
</center>
</td>
</tr>
<tr>
<td rowspan="2">Burası iki satırlık bir sütun.</td>
<td>Burası ilk satır.</td>
</tr>
<tr>
<td>Burası da ikinci satır.</td>
</tr>
</table>

Burada bir yazı var Burası da başka bir göze.
İkinci satırın ilk sütunu İkinci satırın ikinci sütunu
Tablomuz iki sütunluk olmasına rağmen, burada iki sütunluk bir satır var.
Burası iki satırlık bir sütun. Burası ilk satır.
Burası da ikinci satır.

Yukarıdaki örneklerde tabloda kenarlıkların görünüp öğretici olması için border=”1” kodunu kullandım. Sayfalarınızda gerekmedikçe kenarlık kullanmamanız sayfanızın görünümü açısından iyi olacaktır.

Konu: Çerçeveler, tablolar ve formlar(2) C.tesi Şub. 02, 2008 4:51 pm

<form> </form>
Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. Formlar yoluyla ziyaretçiden bilgi alabilir, aldığımız bilgi doğrultusunda birçok işlemi gerçekleştirebiliriz. Ziyaretçiye gönderilecek formu hazırlarken, göze hoş görünmesi açısından, tablolar en çok kullanacağımız bileşenler olacaktır.
Form etiketi ile birlikte en çok kullanılan iki kodu aşağıda belirttim. Bunların dışında bir iki kod daha olsa da pek kullanılmamaktadır.
Tablo 1.6. Form etiketi yardımcı elemanları
Girilecek Kod Görevi
action = "dosya ismi" Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu.
method = "yöntem" Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi

Formlar hazırlanırken çok değişik elemanlar kullanılır. Şimdi formumuza dahil edilebilecek elemanları kısaca tanıyalım. Tanımladığım elemanların etkin kullanımı için form etiketinin yorum aralığı içinde kullanılması gereklidir!. Bu elemanlar form etiketinin dışında da kullanılabilirlerse de istenen fayda sağlanamayacaktır. (Belgedeki etiket örnekleri böyledir, yani etkisizdir.)
Düğmeler
3 tür düğme vardır.
Gönderme düğmeleri
Tıklandığında formu gönderir. Bir form üzerinde birden fazla gönderme düğmesi bulunabilir.
Sıfırlama düğmeleri
Tıklandığında formun içeriği başlangıç değerlerine döndürür.
Genel amaçlı düğmeler
Öntanımlı bir davranışa sahip olmayan düğmelerdir. Tıklandığında event parametresinde belirtilen betiği çalıştırarak bazı ek işlevlerin gerçekleştirilmesinde kullanılırlar.
Düğmeler ya doğrudan <button> etiketi kullanılarak ya da <input> etiketinde bir parametre olarak belirtilerek kullanılır. Daha fazla seçenek sağladığından doğrudan <button> etiketi kullanımı tercih edilir. Belirtildikleri etiketin type parametresinde bu 3 tür düğme sırasıyla submit, reset, button değerleri verilerek kullanılır.
Onay kutuları
Kare, içine tik bırakılan kutucukları oluşturmak için kullanılır. <input> etiketinde bir parametre olarak belirtilerek kullanılır.
Radyo düğmeleri
Sayfamıza yuvarlak işaret kutucuğu bırakmak için kullanılır. Kullanılan kutucuğun onay kutusundan farkı, sadece bir seçenek işaretlenebilmesidir. <input> etiketinde bir parametre olarak type="radio" belirtilerek ve ek olarak value ve name parametreleriyle birlikte kullanılır.
Menüler
Ziyaretçi bu menüden mevcut seçenekler arasından herhangi birini seçerek bilgi girişinde bulunur. Sayfamıza bu elemanı eklemek için <select> etiketini kullanırız.
Metin girişleri
Metin girdilerini almak için iki tür eleman kullanılır. <input> etiketinde bir parametre olarak type="text" kullanılarak tek satırlık ve <textarea> etiketi ile oluşturulan çok satırlı metin girdi elemanlarıdır.
Dosya seçim elemanları
<input> etiketinde bir parametre olarak type="file" kullanılarak oluşturulan elemanlardır.
Gizli elemanlar
<input> etiketinde bir parametre olarak type="hidden" kullanılarak oluşturulan elemanlardır.
Nesneler
<object> etiketi kullanılarak oluşturulan elemanlardır.
Şimdi tanımlanan elemanlarda belirtilen etiketlerin kullanımına bakalım.
<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.
Tablo 1.7. Input etiketi yardımcı kodları
Girilecek Kod Görevi
type = "eleman türü" Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığını aşağıda örnekleriyle açıklamaya çalıştım.
name = "isim" Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
value = "değer" "radio" ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek "değer" eleman türüne göre değişir.
size = "değer" "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.
maxlength = "değer" "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.
checked = "değer" Sadece "radio" ve "checkbox" elemanlarında seçili elemanı "on" olarak belirtmek için kullanılır. Diğerlerinde yoksayılır.
src = "dosya ismi" "image" elemanında resim dosyasını belirtmek için kullanılır.
alt = "metin" Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır.
align = "left|center|right" Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır.
readonly Veri girme amacıyla kullanılmayacak elemanlar içindir.
disabled Veri girişi engellenecek elemanlar içindir.

type parametresi ile belirtilebilecek eleman türleri:
text
Formumuza tek satırlık yazı yazılabilecek alan eklemek için kullanılır.
Adı: <input type="text" name="firstname"><br>
Soyadı: <input type="text" name="lastname">

Adı:
Soyadı:

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ı: <input type="text" name="username"><br>
Parola: <input type="password" name="password">

Kullanıcı:
Parola:

checkbox
Formumuza onay kutuları eklemek için kullanılır.
<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL

HTML
PHP
MySQL

radio
Formumuza radyo düğmeleri eklemek için kullanılır.
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 src parametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur.
<form action="http://herhangibirsite.dom/prog/adduser" method="post">
<p>
Adınız: <input type="text" name="firstname"><br>
Soyadınız: <input type="text" name="lastname"><br>
Eposta adresiniz: <input type="text" name="email"><br>
<input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br>
<input type="radio" name="cinsiyet" value="disi"> Dişi<br>
<input type="submit" value="Send"> <input type="reset" value="Sıfırla">
</P>
</form>

Adınız:
Soyadınız:
Eposta adresiniz:
Erkek
Dişi

file
Formumuza dosya ismi giriş alanı eklemek için kullanılır.
<input type="file">

<button> </button>
Düğmelerin input etiketiyle kullanımına benzer şekilde kullanılır. Ancak sonlandırıcı etiket içerdiğinden yorum alanında başka etiketlerin yeralabilmesi nedeniyle daha geniş bir kullanım alanı vardır. Yukarıdaki örneği button etiketi ile yazarsak farkları görebilirsiniz.
<form action="http://herhangibirsite.dom/prog/adduser" method="post">
<p>
Adınız: <input type="text" name="firstname"><br>
Soyadınız: <input type="text" name="lastname"><br>
Eposta adresiniz: <input type="text" name="email"><br>
<input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br>
<input type="radio" name="cinsiyet" value="disi"> Dişi<br>
<button name="submit" type="submit" value="submit">
<img width="20" height="21" src="../images/belgeler-logo.gif"/>Gönder
</button>
<button name="reset" type="reset" value="reset">
<img width="20" height="21" src="../images/belgeler-logo.gif"/>Sıfırla
</button>
</P>
</form>

Adınız:
Soyadınız:
Eposta adresiniz:
Erkek
Dişi
GönderSıfırla

(Bu örneği hakkıyla, Mozilla görüntülemektedir.)
<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:
<select name="os_type">
<option value="win">Windows 9x</option>
<option value="winnt">Windows NT</option>
<option value="linux">Linux</option>
<option value="unix">UNIX</option>
<option value="os2">OS/2</option>
<option value="macos">MacOS</option>
</select>

Windows 9x Windows NT Linux UNIX OS/2 MacOS

Çok seçimli (ctrl+farenin sol tuşu ile) liste örneği:
<select name="menu" multiple>
<option selected="" value="none">Hiçbiri</option>
<optgroup label="Çorbalar">
<option value="c1">Tarhana</option>
<option value="c2">Ezogelin</option>
<option value="c3">İşkembe</option>
</optgroup>
<optgroup label="Yemekler">
<option value="y1">İmambayıldı</option>
<option value="y2">Sultanbeğendi</option>
<option value="y3">Kadınbudu</option>
</optgroup>
<optgroup label="Tatlılar">
<option value="t1">Kazandibi</option>
<option value="t2">Tavukgöğsü</option>
<option value="t3">Keşkül</option>
</optgroup>
</select>

Hiçbiri Tarhana Ezogelin İşkembe İmambayıldı Sultanbeğendi Kadınbudu Kazandibi Tavukgöğsü Keşkül

<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.
<fieldset>
<legend>Kişisel Bilgiler</legend><br/>
Adı: <input name="personal_fname" type="text" size="20" tabindex="1"/>
Soyadı: <input name="personal_lname" type="text" size="25" tabindex="2"/><br/><br/>
Adresi: <input name="personal_address" type="text" size="55" tabindex="3"/><br/><br/>

</fieldset>
<fieldset>
<legend>Tıbbî Geçmişi</legend><br/>
<input name="gecirilen_hastalik"
type="checkbox"
value="bogmaca" tabindex="20"/> Boğmaca
<input name="gecirilen_hastalik"
type="checkbox"
value="kabakulak" tabindex="21"/> Kabakulak
<input name="gecirilen_hastalik"
type="checkbox"
value="kizamik" tabindex="22"/> Kızamık
<input name="gecirilen_hastalik"
type="checkbox"
value="sucicegi" tabindex="23"/> Suçiçeği<br/><br/>


</fieldset>
<fieldset>
<legend>İlaç Tedavisi</legend><br/>
Halen kullanmakta olduğunuz ilaçlar var mı?<br/>
<input name="medication_now"
type="radio"
value="Evet" tabindex="35"/> Evet
<input name="medication_now"
type="radio"
value="Hayir" tabindex="35"/>Hayır<br/><br/>

Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve
günlük dozlarını belirtiniz:<br/>
<textarea name="kullandigi_ilaclar"
rows="10" cols="60"
tabindex="40">
</textarea>
</fieldset>

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:

(Bu örneği hakkıyla, Mozilla görüntülemektedir.)