انواع ورودی html
انواع ورودی html در فرم ها
آموزش فرم های html درس سوم
انواع ورودی html : در این درس انواع محتلف ورودی عنصر <input> توضیح داده شده است.
Input Type Text
<input type=”text”> یک فیلد ورودی متن یک خطی را تعریف می کند.
مثال:
[php]<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
Input Type Password
<input type=”password”> فیلد پسورد را تعریف می کند:
مثال :
[php]<form>
User name:
<input type="text" name="username">
User password:
<input type="password" name="psw">
</form>
نکته : کاراکترهای یک فیلد رمز عبور (پوشیده شده به عنوان ستاره یا حلقه) نشان داده می شوند.
Input Type Submit
<input type=”submit”> یک دکمه را برای ارسال داده فرم به یک handler form تعریف می کند.
handler form معمولاً یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.
handler form در ویژگی action فرم مشخص شده است:
مثال:
[php]<form action="/action_page.php">
First name:
<input type="text" name="firstname" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>
<form action="/action_page.php">
First name:
<input type="text" name="firstname" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">
<input type="submit">
</form>
Input Type Reset
<input type=”reset”>یک دکمه reset را تعریف می کند که تمام مقادیر فرم را به مقادیر پیش فرض آن باز می گرداند:
مثال:
[php]<form action="/action_page.php">
First name:
<input type="text" name="firstname" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
<input type="reset">
</form>
Input Type Radio
<input type=”radio”> دکمه های radio را تعریف می کند.
دکمه های رادیویی به شما اجازه می دهد تا فقط یک انتخاب از تعداد محدودی از گزینه ها را انتخاب کنید:
[php]<form>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</form>
Input Type Checkbox
<input type=”checkbox”> یک checkbox را تعریف می کند.
checkbox اجازه می دهد که کاربر صفر گزینه یا بیشتر را برای تعداد محدودی از گزینه ها انتخاب کند.
مثال :
[php]<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Input Type Button
<input type=”button”> یک دکمه را تعریف می کند.
مثال :
[php] <input type="button" onclick="alert(‘Hello World!’)" value="Click Me!">[/php]
HTML5 Input Types
HTML5 انواع ورودی html جدید اضافه کرد:
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
نکته : انواع ورودی html جدید که توسط مرورگرهای وب قدیمی پشتیبانی نمی شوند، به عنوان <input type = “text”> رفتار خواهند کرد.
Input Type Color
<input type = “color”> برای فیلدهای ورودی که باید شامل یک رنگ باشد استفاده می شود.
بسته به پشتیبانی مرورگر، یک انتخاب رنگ می تواند در زمینه ورودی نشان داده شود.
مثال :
[php]<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Input Type Date
<input type = “date”> برای فیلدهای ورودی که باید حاوی یک تاریخ باشد استفاده می شود.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
مثال :
[php]<form>
Birthday:
<input type="date" name="bday">
</form>
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
</form>
Input Type Datetime-local
<input type = “datetime-local”> یک فیلد ورودی تاریخ و زمان را بدون هیچ منطقه زمانی مشخص می کند.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
[php]<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type Email
<input type = “email”> برای فیلدهای ورودی که باید شامل یک آدرس ایمیل باشد استفاده می شود.
بسته به پشتیبانی مرورگر، آدرس ایمیل می تواند به صورت خودکار هنگام ارسال تأیید شود.
بعضی از گوشی های هوشمند نوع ایمیل را تشخیص می دهند و “.com” را به صفحه کلید اضافه می کنند تا ورودی های ایمیل را مطابقت دهند.
مثال :
[php]<form>
E-mail:
<input type="email" name="email">
</form>
Input Type Month
<input type = “month”> به کاربر اجازه می دهد یک ماه و سال را انتخاب کند.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
مثال :
[php]<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Input Type Number
<input type = “number”> یک فیلد ورودی عددی را تعریف می کند.
شما همچنین می توانید محدودیت هایی را برای تعداد اعداد پذیرفته شده تنظیم کنید.
مثال زیر یک فیلد ورودی عددی را نشان می دهد، جایی که می توانید مقدار 1 تا 5 را وارد کنید:
مثال:
[php]<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Input Restrictions
در اینجا یک لیست از محدودیت های انواع ورودی html مشترک وجود دارد (برخی از آنها در HTML5 جدید هستند):
| Attribute | Description |
|---|---|
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
شما در مورد محدودیت ورودی در درس بعدی بیشتر بیاموزید.
مثال زیر یک فیلد ورودی عددی را نشان می دهد، که در آن می توانید یک مقدار از 0 تا 100 را در مراحل 10 وارد کنید. مقدار پیش فرض 30 است:
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Input Type Range
<input type = “range”> یک کنترل را برای وارد کردن یک شماره تعیین می کند که مقدار دقیق آن مهم نیست (مانند slider control). محدوده پیش فرض 0 تا 100 است. با این حال، می توانید محدودیت هایی را برای تعداد عددی با حداقل، حداکثر و ویژگی های مرحله ای تنظیم کنید :
مثال :
[php]<form>
<input type="range" name="points" min="0" max="10">
</form>
Input Type Search
<input type = “search”> برای فیلدهای جستجو استفاده می شود (یک فیلد جستجو مانند یک فیلد متنی معمولی رفتار می کند).
مثال :
[php]<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Input Type Tel
<input type = “tel”> برای فیلدهای ورودی که باید دارای شماره تلفن باشند استفاده می شود.
نوع تلفن در حال حاضر تنها در Safari 8 پشتیبانی می شود.
مثال :
[php]<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Input Type Time
<input type = “time”> اجازه می دهد تا کاربر یک زمان (بدون منطقه زمانی) را انتخاب کند.
بسته به پشتیبانی مرورگر، زمان انتخاب می تواند در زمینه ورودی نشان داده شود.
مثال :
[php]<form>
Select a time:
<input type="time" name="usr_time">
</form>
Input Type Url
<input type = “url”> برای فیلدهای ورودی که باید آدرس URL را داشته باشند استفاده می شود.
بسته به پشتیبانی مرورگر، فیلد URL زمانی که ارسال می شود، می تواند به صورت خودکار تایید شود.
بعضی از گوشی های هوشمند نوع url را تشخیص می دهند و به صفحه “.com” اضافه می کنند تا ورودی های Url را مطابقت دهند.
مثال :
[php]<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Input Type Week
<input type = “week”> اجازه می دهد تا کاربر یک هفته و سال را انتخاب کند.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
مثال :
[php]<form>
Select a week:
<input type="week" name="week_year">
</form>
