Input های رایج و قدیمی HTML

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 ما از نوع متنی بوده و تبدیل به یک فیلد خالی برای تایپ کاربر می شود:

<!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>

مشاهده ی خروجی در JSBin

Input های رمز عبور

فیلد های رمز عبور دقیقا مانند فیلد های متنی هستند بنابراین <"input type="password> هنوز هم یک فیلد خالی برای تایپ به ما می دهد اما تفاوت اینجاست که برای حفظ حریم شخصی کاربر، ظاهر هر چیزی که در این قسمت بنویسید با دایره های سیاه جایگزین می شود و کسی نمی تواند رمز تایپ شده ی شما را ببیند:

<!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>

مشاهده ی خروجی در JSBin

Input های ارسال فرم

<"input type="submit> بدین معنا است که input مورد نظر می خواهد فرمی را ثبت و ارسال (submit) کند. این فرم سپس به یک form-handler ارسال می شود. همانطور که قبلا هم توضیح دادیم form-handler صفحات اسکریپتی در سمت سرور هستند که کار پردازش و ذخیره ی داده های ارسالی را بر عهده دارند و آدرسشان در قسمت action مشخص می شود:

<!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>

مشاهده ی خروجی در JSBin

نکته: اگر مقدار value را برای submit تعیین نکنید، یک مقدار پیش فرض برای آن تعیین می شود که معمولا همان کلمه ی submit است.

Input های پاک کردن فرم

input هایی که به صورت <"input type="reset> نوشته می شوند، معمولا یک reset button (دکمه ی ریستارت یا شروع مجدد) را ایجاد می کنند و زمانی که کاربر روی این دکمه کلیک کند تمام محتوایی که در فیلد ها نوشته است پاک می شود.

<!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>

مشاهده ی خروجی در JSBin

Input های radio

در جلسات قبل با radio button ها آشنا شدیم؛ آن ها به هر کاربر اجازه می دهند تا از بین چند گزینه تنها یک گزینه را انتخاب کند:

<!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>

مشاهده ی خروجی در JSBin

Input های Checkbox

input های checkbox به صورت <"input type="checkbox> ساخته می شوند؛ آن ها به کاربر اجازه می دهند که از بین چند گزینه صفر، یک، دو، سه و ... یا همه را انتخاب کند:

<!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>

مشاهده ی خروجی در 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 معرفی شده اند، یعنی: