تگ input در form

یکی از مهمترین تگهای فرم تگ input میباشد این تگ انواع مختلفی دارد که با شناسه type نو آن مشخص میشود در مثال زیر نحوه استفاده از آن را در قالب مثال نشان داده ایم

<form action="user/ action_page.php " method="get">
<input type="button" />
<input type="checkbox" />
<input type="hidden" />
<input type="password" />
<input type="submit" />
<input type="text" />
</form>

در این مثال فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و ... را ایجاد کرده ایم.

Input Type Text

برای گرفتن اطلاعات متنی از کاربر از این تگ استفاده میشود.اگر از شناسه type در این تگ استفاده نشود به طور پیش فرض نوع text برای آن در نظر گرفته میشود.

<form action="/action_page.php">
    First name:
    <input type="text" name="firstname">
    Last name:
    <input type="text" name="lastname">
    <input type="submit">
</form>

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

First name:

Last name:


 

Input Type Password

برای گرفتن پسورد از کاربر استفاده میشود. با نوشتن داخل باکسی که نوع پسورد است کاراکترهای وارد شده به صورت دایره ای یا ستاره دیده میشوند ظاهر میشوند.

<form action="">
    User name:
    <input type="text" name="userid">
    User password:
    <input type="password" name="psw">
</form>

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

User name:

User password:
 

Input Type Submit

نوع submit برای ایجاد دکمه ارسال اطلاعات فرم کاربرد دارد.
مثال:

<form>
نام:
<input type="text" name="firstname" value="فاطمه">
نام خانوادگی:
<input type="text" name="lastname" value="مختاری">
<input type="submit" value="ارسال">
</form>

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

خروجی مثال بالا:

نام:

نام خانوادگی:


 

با کلیک بر روی دکمه ارسال اطلاعات شما ارسال خواهد شد.

Input Type Reset

این input دکمه ای ایجاد میکند که با کلیک بر روی آن اطلاعات فیلدها به حالت پیش فرض برمی گردد.

<form>
First name:
<input type="text" name="firstname" value="فاطمه">
Last name:
<input type="text" name="lastname" value="مختاری">
<input type="submit" value="Submit">
<input type="reset">
</form>

خروجی:

First name:

Last name:


 

در این مثال اگر مقادیر فیلدها را تغیر دهید با کلیک بروی دکمه reset اطلاعات به حالت اول برمیگردد.

Input Type Radio

برای ساختن دکمه های رادیویی از تگ input و نوع radio استفاده میشود.این نوع دکمه ها را حتما در فرم های نظر سنجی که کاربر فقط یک گزینه را از بین گزینه های موجود میتواند انتخاب کند را دیده اید. برای ایجاد این دکمه ها به صورت زیر عمل میکنیم.

<form>
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female"> Female
  <input type="submit">
</form>

خروجی:

Male
Female
 

شناسه checked باعث می شود تا در هنگام باز شدن صفحه موردنظر به صورت انتخاب شده نمایش داده شود .

Input Type Checkbox

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

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form>

خروجی:

I have a bike
I have a car

Input Type Button

برای ایجاد دکمه ها به کار میرود.

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

خروجی:

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

کامنت جدید ...