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> defines a one-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>
<p dir='rtl'>توجه داشته باشید که خود تگ form نمایش داده نمی شود.</p> <p dir='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> defines a password field:</p>
<form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form>
<p dir='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> defines a button for submitting form data to a form-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>If you click "Submit", the form-data will be sent to a page 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> defines a reset button that will reset all form values to their default values:</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>
<p dir='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> defines a radio button:</p>
<p dir='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> defines a checkbox:</p>
<p dir='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
- ۹۸/۰۷/۲۶