آشنایی با انواع Input در HTML

مهمترین عناصر فرم Input ها هستند که از طریق آنها میتوانیم اطلاعات وارد شده توسط کاربر را دریافت کنیم. در این فصل با انواع مختلف این عنصر آشنا خواهیم شد.

Input از نوع text

عنصر <"input type="text> یک فیلد تک خطی ورودی را تعریف میکند :

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
خودتان امتحان کنید

از این فیلد برای ورود داده های متنی همچون نام و نام خانوادگی استفاده میشود.

Input از نوع Password

عنصر <"input type="password> یک فیلد ورودی گذر واژه را تعریف میکند.

کارکتر هایی که در فیلد گذر واژه تایپ میشوند دارای پوشش هستند یعنی به صورت بولت نشان داده میشوند :

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
خودتان امتحان کنید

Input از نوع Submit

عنصر <input type="submit"> یک دکمه را برای سابمیت کردن داده های فرم به یک اکشن (معمولا صفحه ای در سرور) تعریف میکند.

اکشن معمولا اسکریپتی در صفحه ای از سرور است که داده های ارسالی را مدیریت میکند.

نام اکشن در صفت action از فرم قرار میگیرد :

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

در تصویر زیر خروجی کد بالا را مشاهده میکنید :

فیلد ورودی متن

 بعد پر کردن فیلد های نام و نام خانوادگی، با کلیک روی دکمه ی submit داده های وارد شده در فیلد ها به صفحه ای به نام "action_page.php" ارسال میشود. داده ها توسط این صفحه پردازش شده (ممکن است در پایگاه داده ثبت شوند) و نتیجه به سمت کاربر ارسال میشود.

اگر مقدار صفت value را برای دکمه ی submit مشخص نکنید از مقدار پیشفرض برای آن استفاده میشود :

<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">
</form>

خروجی کد بالا به شکل زیر است :

Input از نوع Reset

عنصر <input type="reset"> یک دکمه ی reset را تعریف کرده که تمام مقادیر فرم را به مقادیر پیشفرض آنها بر میگرداند :

<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>
خودتان امتحان کنید

در مثال بالا برای ورودی های firstname و lastname مقادیر پیشفرضی در نظر گرفته شده است. اگر این مقادیر را تغییر داده و روی دکمه ی reset کلیک کنیم، ورودی ها به مقادیر پیشفرض برخواهند گشت.

منتشر شده در ۲۸ خرداد ۱۳۹۶ حمید رضا ملکی ۷۱۵ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده