المان های فرم (Form Elements)
فرم در HTML یعنی جعبه های ورودی برای کاربر. «المان فرم (Form Element)» همان تگ هایی هستند که فرم را می سازند؛ مثل input و select.
تگ <input>؛ ورودی های سریع
input یک ورودی می سازد. نوع ورودی با ویژگی type مشخص می شود.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
تگ <label>؛ برچسب خوانا
label برای توضیح ورودی است. با for و id به هم وصل می شوند.
تگ <select>؛ فهرست کشویی
select یک لیست کشویی می سازد. گزینه ها با option تعریف می شوند.
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
گزینه از پیش انتخاب شده
<option value="fiat" selected>Fiat</option>
تعداد گزینه های قابل مشاهده
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
انتخاب چندتایی
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
تگ <textarea>؛ متن چندخطی
textarea برای متن های بلند است. اندازه با rows و cols تعیین می شود.
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
تعیین اندازه با CSS
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
تگ <button>؛ دکمه کلیکی
button یک دکمه می سازد. نوع دکمه را با type مشخص کن.
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>
نکته: همیشه type دکمه را مشخص کن تا رفتار یکسان بماند.
<fieldset> و <legend>؛ گروه بندی
fieldset داده های مرتبط را گروه می کند. legend عنوان همان گروه است.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="Doe">
<input type="submit" value="Submit">
</fieldset>
</form>
تگ <datalist>؛ پیشنهاد آماده
datalist گزینه های پیشنهادی می دهد. input باید به id دیتالیست وصل شود.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
</form>
تگ <output>؛ نمایش نتیجه محاسبه
output نتیجه محاسبه را نشان می دهد. مقدار با جاوااسکریپت تنظیم می شود.
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br>
<input type="submit">
</form>
جمع بندی سریع
- input برای ورودی های گوناگون است.
- label دسترسی پذیری را بهتر می کند.
- select گزینه می دهد؛ multiple انتخاب چندتایی می دهد.
- textarea متن های بلند را می گیرد.
- output نتیجه محاسبه را نشان می دهد.