Input های رایج و قدیمی
همانطور که در دو قسمت قبلی دیدیم، input ها قسمت مهمی از فرم های HTML هستند و ما می خواهیم در این قسمت انواع آن ها را بررسی کنیم. انواع input ها از این قرار هستند:
<"input type="button>
<"input type="checkbox>
<"input type="color>
<"input type="date>
<"input type="datetime-local>
<"input type="email>
<"input type="file>
<"input type="hidden>
<"input type="image>
<"input type="month>
<"input type="number>
<"input type="password>
<"input type="radio>
<"input type="range>
<"input type="reset>
<"input type="search>
<"input type="submit>
<"input type="tel>
<"input type="text>
<"input type="time>
<"input type="url>
<"input type="week>
ما می خواهیم این موارد را طی دو قسمت بررسی کنیم. در قسمت اول که همین قسمت می باشد، input هایی را به شما معرفی می کنیم که بسیار کاربردی بوده و سال های سال است که مورد استفاده قرار می گیرند. این نوع input ها توسط تمام برنامه نویسان وب شناخته شده هستند و سابقه ای دیرینه دارند. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند؛ این input ها تقریبا جدید تر هستند و بعضی از آن ها ممکن است در تمام مرورگر ها پشتیبانی نشوند اما امکانات بیشتری به ما می دهند. پس ابتدا برویم سراغ input های اصلی و رایج…
Input های متنی
<"input type="text>
به معنی این است که input ما از نوع متنی بوده و تبدیل به یک فیلد خالی برای تایپ کاربر می شود:
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>Text field</h2>
<p>The<strong>input type="text"</strong>definesaone-line text input field:</p>
<form action="/action_page.php">
First name:<br>
<input type="text"name="firstname">
<br>
Last name:<br>
<input type="text"name="lastname">
<br><br>
<input type="submit">
</form>
<pdir='rtl'>توجهداشتهباشیدکهخودتگformنمایشدادهنمیشود.</p>
<pdir='rtl'>عرضپیشفرضهرفیلد20کاراکتراست</p>
</body>
</html>
|
Input های رمز عبور
فیلد های رمز عبور دقیقا مانند فیلد های متنی هستند بنابراین <"input type="password>
هنوز هم یک فیلد خالی برای تایپ به ما می دهد اما تفاوت اینجاست که برای حفظ حریم شخصی کاربر، ظاهر هر چیزی که در این قسمت بنویسید با دایره های سیاه جایگزین می شود و کسی نمی تواند رمز تایپ شده ی شما را ببیند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<p>The<strong>input type="password"</strong>definesapassword field:</p>
<form action="">
User name:<br>
<input type="text"name="userid">
<br>
User password:<br>
<input type="password"name="psw">
</form>
<pdir='rtl'>کاراکترهاییکهدرinputهایرمزیتایپمیشونددیدهنمیشوند.میتوانیددرقسمتراستاینموضوعراامتحانکنید.</p>
</body>
</html>
|
Input های ارسال فرم
<"input type="submit>
بدین معنا است که input مورد نظر می خواهد فرمی را ثبت و ارسال (submit) کند. این فرم سپس به یک form-handler ارسال می شود. همانطور که قبلا هم توضیح دادیم form-handler صفحات اسکریپتی در سمت سرور هستند که کار پردازش و ذخیره ی داده های ارسالی را بر عهده دارند و آدرسشان در قسمت action
مشخص می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<h2>Submit Button</h2>
<p>The<strong>input type="submit"</strong>definesabutton forsubmitting form data toaform-handler:</p>
<form action="/action_page.php">
First name:<br>
<input type="text"name="firstname"value="Mickey">
<br>
Last name:<br>
<input type="text"name="lastname"value="Mouse">
<br><br>
<input type="submit"value="Submit">
</form>
<p>Ifyou click"Submit",the form-data will be sent toapage called"/action_page.php".</p>
</body>
</html>
|
value
را برای submit تعیین نکنید، یک مقدار پیش فرض برای آن تعیین می شود که معمولا همان کلمه ی submit است.Input های پاک کردن فرم
input هایی که به صورت <"input type="reset>
نوشته می شوند، معمولا یک reset button (دکمه ی ریستارت یا شروع مجدد) را ایجاد می کنند و زمانی که کاربر روی این دکمه کلیک کند تمام محتوایی که در فیلد ها نوشته است پاک می شود.
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>Reset Button</h2>
<p>The<strong>input type="reset"</strong>definesareset button that will reset all form values totheir defaultvalues:</p>
<form action="/action_page.php">
First name:<br>
<input type="text"name="firstname"value="Mickey">
<br>
Last name:<br>
<input type="text"name="lastname"value="Mouse">
<br><br>
<input type="submit"value="Submit">
<input type="reset">
</form>
<pdir='rtl'>اگردرفیلدهایبالامقداریرابنویسیدوتغییرشاندهید،سپسرویدکمهیresetکلیککنیدتماممحتوایفرمبهحالتاولیهیآنبازمیگردد.</p>
</body>
</html>
|
Input های radio
در جلسات قبل با radio button ها آشنا شدیم؛ آن ها به هر کاربر اجازه می دهند تا از بین چند گزینه تنها یک گزینه را انتخاب کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>The<strong>input type="radio"</strong>definesaradio button:</p>
<pdir='rtl'>لطفاجنسیتخودراانتخابکنید:</p>
<form dir='rtl'action="/action_page.php">
<input type="radio"name="gender"value="male"checked>مرد<br>
<input type="radio"name="gender"value="female">زن<br>
<input type="radio"name="gender"value="other">نمیخواهماعلامکنم<br><br>
<input type="submit"Value='ارسال فرم'>
</form>
</body>
</html>
|
Input های Checkbox
input های checkbox به صورت <"input type="checkbox>
ساخته می شوند؛ آن ها به کاربر اجازه می دهند که از بین چند گزینه صفر، یک، دو، سه و … یا همه را انتخاب کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The<strong>input type="checkbox"</strong>definesacheckbox:</p>
<pdir='rtl'>مالککداممواردهستید؟</p>
<form dir='rtl'action="/action_page.php">
<input type="checkbox"name="vehicle1"value="Bike">مندوچرخهدارم
<br>
<input type="checkbox"name="vehicle2"value="Car">منماشیندارم
<br>
<input type="checkbox"name="bus"value="Car">مناتوبوسدارم
<br><br>
<input type="submit"Value='ارسال فرم'>
</form>
</body>
</html>
|
Input های دکمه ای
این نوع از input ها به صورت <"input type="button>
تعریف می شوند. سوالی که در ابتدا پیش می آید این است که برخی از input های قبلی نیز دکمه می شدند. چرا به این نوع از input ها به طور خاص دکمه ای می گوییم؟ جواب این است که این نوع از input ها تنها یک دکمه هستند و کارکرد آن ها را شما و معمولا با جاوا اسکریپت مشخص می کنید. input های قبلی که تبدیل به یک دکمه شدند کارشان تعریف شده بود و از این نظر با input های دکمه ای متفاوت هستند:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button"onclick="alert('سلام کاربر گرامی!')"value="!روی من کلیک کن">
</body>
</html>
|
تا اینجای کار با input های معروف HTML آشنا شدیم. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند، یعنی:
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو