در جلسه ی قبل به صورت خلاصه اشاره ای به این عنصر داشتیم اما در این قسمت کمی مفصل تر صحبت خواهیم کرد. مهم ترین عنصر یک فرم <input> است که بر اساس مقدار type میتواند به انواع و اشکال مختلفی ظاهر شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
Enter your name:
<input name="firstname"type="text">
<br><br>
<input type="submit">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: اگر مقدار type را خالی بگذارید، مقدار پیش فرض که همان text است برایش تعیین می شود.
عنصر <select>
این عنصر یک لیستِ drop-down را می سازد. لیست های drop-down لیست هایی هستند که با کلیک روی آن ها می توانید از بین گزینه هایشان که نمایان می شود انتخاب کنید. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element definesadrop-down list:</p>
<form action="/action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: این خروجی ها تنها برای نمایش ظاهر این عناصر هستند و فاقد قدرت پردازشی می باشند، بنابراین با کلیک روی submit اتفاقی نمی افتد اما در حالت واقعی داده ها پردازش خواهند شد.
هر کدام از <option> های بالا یکی از گزینه های لیست ما می باشد و در حالت پیش فرض اولین <option> بدون کلیک و در فیلد ما نمایان خواهد بود. اگر می خواهید این موضوع را تغییر دهید و <option> مورد نظر خود را گزینه ی پیش فرض کنید از selected استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute.</p>
<form action="/action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat"selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همچنین اگر می خواهید تعداد گزینه هایی که نمایان هستند افزایش پیدا کنند، می توانید از size استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<h2>Visible Option Values</h2>
<p>Usethe size attribute tospecify the number of visible values.</p>
<form action="/action_page.php">
<select 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>
<br><br>
<input type="submit">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در آخر اگر می خواهید کاربر بتواند چندین گزینه را انتخاب کند از multiple استفاده می کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<body>
<h2>Allow Multiple Seletcions</h2>
<p>Usethe multiple attribute toallow the user toselect more than one value.</p>
<form action="/action_page.php">
<select 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>
<br><br>
<input type="submit">
</form>
<p>Hold down the Ctrl(windows)/Command(Mac)button toselect multiple options.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
برای این کار کاربر باید کلید کنترل (Ctrl) را نگه دارد و سپس گزینه های مورد نظرش را انتخاب کنید. بدین ترتیب می توان چندین گزینه را انتخاب نمود. می توانید این مورد را در مثالا بالا امتحان کنید.
عنصر <textarea>
عنصر <textarea> یک فیلد متنیِ چند خطی را ایجاد می کند. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element definesamulti-line input field.</p>
<form action="/action_page.php">
<textarea name="message"rows="10"cols="30">The cat was playing inthe garden.</textarea>
<br>
<input type="submit">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در کد بالا rows مسئول مشخص کردن تعداد خطوط قابل رویت در text area و cols مسئول مشخص کردن عرض قابل رویت آن هستند. البته می توانید این اندازه ها را با CSS نیز تعیین کنید:
|
|
<textarea name="message"style="width:200px; height:600px;">
The cat was playing inthe garden.
</textarea>
|
عنصر <button>
عنصر <button> یک دکمه را تعریف می کند:
|
|
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<button type="button"onclick="alert('سلام کاربر گرامی')">رویمنکلیککن</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید دکمه ها به خودی خود کاری نمی کنند و ما باید برایشان تعریف کنیم که قرار است چه کار کنند.
نکته: مرورگر های مختلف ممکن است از مقادیر مختلفی برای حالت پیش فرضِ type استفاده کنند بنابراین بهتر خودتان آن را مشخص کنید.
عناصر HTML5
با معرفی HTML5 دو عنصر دیگر نیز به عناصر بالا اضافه شدند:
این عناصر جدید هستند بنابراین در مرورگر های قدیمی نمایش داده نمی شوند و جای آنها خالی گذاشته می شود.
عنصر <datalist> لیستی از گزینه های از پیش تعیین شده را برای <input> ایجاد می کند و کاربران هنگام کار با آن با یک لیست drop-down سر و کار دارند. همچنین list مربوط به <input> باید به id مربوط به <datalist> اشاره کند.
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifiesalist of pre-defined options foran input element.</p>
<form action="/action_page.php">
<input list="browsers"name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<pdir='rtl'><b>هشدار:</b>اینقابلیتدرمرورگرهایسافاریواینترنتاکسپلورر9وقبلترپشتیبانینمیشود</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنصر <output> نیز نماینده ی یک محاسبه است (معمولا محاسبه هایی که با اسکریپت و در سمت سرور انجام می شوند):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>
<p>میتوانیدمقدارجمعایندوعددرابهراحتیپیداکنید</p>
<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><br>
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرEdge12وIEومرورگرهایقدیمیپشتیبانینمیشود</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: این عملیات فعلا کار نمی کند چرا که برای محاسبه ی این اعداد و دریافت خروجی شان نیاز دارید در سمت سرور هم کدهایش را بنویسید.
امیدوارم از این قسمت لذت برده باشید.
چطور از فشرده ساز Winrar استفاده کنیم؟