HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
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>
|
مشاهده ی خروجی در JSBin
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>
|
مشاهده ی خروجی در JSBin
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>
|
مشاهده ی خروجی در JSBin
نکته: اگر مقدار
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>
|
مشاهده ی خروجی در JSBin
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>
|
مشاهده ی خروجی در JSBin
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>
|
مشاهده ی خروجی در JSBin
Input های دکمه ای
این نوع از input ها به صورت <"input type="button> تعریف می شوند. سوالی که در ابتدا پیش می آید این است که برخی از input های قبلی نیز دکمه می شدند. چرا به این نوع از input ها به طور خاص دکمه ای می گوییم؟ جواب این است که این نوع از input ها تنها یک دکمه هستند و کارکرد آن ها را شما و معمولا با جاوا اسکریپت مشخص می کنید. input های قبلی که تبدیل به یک دکمه شدند کارشان تعریف شده بود و از این نظر با input های دکمه ای متفاوت هستند:(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button"onclick="alert('سلام کاربر گرامی!')"value="!روی من کلیک کن">
</body>
</html>
|
مشاهده ی خروجی در JSBin
تا اینجای کار با input های معروف HTML آشنا شدیم. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند، یعنی:(ایران گستر)
- color
- date
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
:: بازدید از این مطلب : 24
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
