آموزش تگ input در HTML - راهنمای کار با عناصر دریافت اطلاعات کاربر در فرم html

برای دریافت اطلاعات ورودی کاربر در فرم از تگ input استفاده می شود. این ورودی ها انواع مختلف دارد. به طور مثال این اطلاعات می تواند شامل نام، تلفن، ...

برای دریافت اطلاعات ورودی کاربر در فرم از تگ input استفاده می شود. این ورودی ها انواع مختلف دارد. به طور مثال این اطلاعات می تواند شامل نام، تلفن، سن، ایمیل و... باشد.

انواع ورودی input

نوع Text در input

برای دریافت ورودی متنی تک خطی از کاربر، فیلد از نوع text استفاده می شود: <input type="text">

در صورتی که در تگ input نوع type مشخص نشود، به صورت پیش فرض نوع متنی برای آن فیلد در نظر گرفته می شود.

مثال:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>

نوع Password در تگ input

برای دریافت رمز عبور از کاربر، فیلد از نوع password استفاده می شود: <input type="password">

مثال:

<form action="/action_page.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" value="milad"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd" value="milad@example.com"><br><br>
</form>

نوع Submit در input

برای ثبت فرم و ارسال اطلاعات به کنترل کننده فرم فیلد از نوع submit استفاده می شود: <input type="submit">

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

مثال:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="milad"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="miladi"><br><br>
<input type="submit" value="Submit">
</form>

نوع Reset در input

برای برگرداندن اطلاعات فرم به حالت پیش فرض، فیلد از نوع reset استفاده می شود: <input type="reset">
مثال:

نوع Radio در تگ input

برای ایجاد دکمه رادیویی، فیلد از نوع radio استفاده می شود: <input type="radio">

در دکمه رادیویی کاربر فقط می تواند یک گزینه را انتخاب کند.

مثال:

<form action="/action_page.php">
<input type="radio" id="SEO" name="dars" value="SEO">
<label for="SEO">SEO</label><br>
<input type="radio" id="content" name="dars" value="content">
<label for="content">Content Marketing</label><br>
<input type="radio" id="other" name="dars" value="other">
<label for="other">Other</label><br><br>
</form>

نوع CheckBox در input

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

چک باکس ها امکان انتخاب صفر یا هر تعداد گزینه را به کاربر می دهند.

مثال:

<form action="/action_page.php">
<input type="checkbox" id="seo" name="seo" value="SEO">
<label for="seo"> SEO</label><br>
<input type="checkbox" id="content" name="content" value="Content Marketing">
<label for="content"> Content Marketing</label><br>
<input type="checkbox" id="opt" name="opt" value="Optimization">
<label for="opt"> Optimization</label><br><br>
</form>

نوع Button در input

برای ایجاد کلید در فرم، فیلد از نوع button استفاده می شود: <input type="button">

مثال:

نوع Color در تگ input

برای دریافت رنگ از کاربر، فیلد از نوع color استفاده می شود: <input type="color">

در این حالت یک انتخاب کننده رنگ (Color Picker) که مرورگر از آن پشتیبانی می کند نمایش داده می شود.

مثال:

<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

نوع Date در input

برای دریافت اطلاعات به صورت تاریخ از کاربر، فیلد از نوع date استفاده می شود: <input type="date">

در این حالت یک انتخاب کننده تاریخ که مرورگر از آن پشتیبانی می کند نمایش داده می شود.

مثال:

<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>

نوع Datetime-local در input

برای دریافت تاریخ و زمان بدون در نظر گرفتن منطقه زمانی از کاربر، فیلد از نوع datetime-local استفاده می شود: <input type="datetime-local">

در این حالت یک انتخاب کننده تاریخ که مرورگر پشتیبانی می کند نمایش داده می شود.

مثال:

<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

نوع Email در input

برای دریافت ایمیل از کاربر، فیلد از نوع email استفاده می شود: <input type="email">

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

مثال:

<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>

نوع File در input

برای دریافت فایل از کاربر، فیلد از نوع file استفاده می شود: <input type="file">

مثال:

<form action="/action_page.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
</form>

نوع Month در تگ input

برای دریافت ماه و سال از کاربر، فیلد از نوع month استفاده می شود: <input type="month">

در این حالت انتخاب کننده تاریخی که مرورگر شما پشتیبانی می کند نمایش داده می شود.

مثال:

<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

نوع Number در input

برای دریافت اعداد از کاربر، فیلد از نوع number استفاده می شود: <input type="number">

مثال:

<form action="/action_page.php">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="40">
<input type="submit" value="Submit">
</form>

نوع Range در input

برای ایجاد فیلد انتخاب بازه (رنجی) از اعداد از نوع range استفاده می شود: <input type="range">

مثال:

<form action="/action_page.php" method="get">
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
</form>

نوع Search در input

برای ایجاد فیلد جستجو از نوع search استفاده می شود: <input type="search">

مثال:

<form action="/action_page.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit" value="Submit">
</form>

نوع Tel در input

برای دریافت شماره تلفن از کاربر، فیلد از نوع tel استفاده می شود: <input type="tel">

مثال:

<form action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="0912-1234567" pattern="[0-9]{4}-[0-9]{7}" required><br><br>
<small>Format: 0912-1234567</small><br><br>
<input type="submit" value="Submit">
</form>

نوع Time در input

برای دریافت زمان از کاربر، فیلد از نوع time استفاده می شود: <input type="time">

در این حالت یک انتخاب کننده زمان که مرورگر شما از آن پشتیبانی می کند نمایش داده می شود.

مثال:

<form action="/action_page.php">
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit">
</form>

نوع Url در تگ input

برای دریافت آدرس اینترنتی از کاربر، فیلد از نوع url استفاده می شود: <input type="url">

در این حالت مرورگر شما به صورت خودکار آن آدرس را اعتبارسنجی می کند.

مثال:

<form action="/action_page.php">
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
<input type="submit" value="Submit">
</form>

نوع Week در تگ input

برای دریافت هفته و سال از کاربر، فیلد از نوع week استفاده می شود: <input type="week">

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

مثال:

<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

پشتیبانی مرورگرها

تگ <input> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر / اج
پشتیبانی	بله	بله	بله	بله	بله

ویژگی ها

ویژگی	مقدار	توضیحات
accept	file_extension audio/* video/* image/* media_type	نوع فایل هایی که کاربر اجازه آپلود آنها را دارد مشخص می کند و فقط برای نوع file کاربرد دارد.
align	left right top middle bottom	در نوع image، شیوه ترازبندی image input را مشخص می کند. این ویژگی در HTML5 پشتیبانی نمی شود.
alt	text	متن جایگزین درباره تصویر برای نوع image
autocomplete	on off	قابلیت تکمیل خودکار فیلد را مشخص می کند.
autofocus	autofocus	هنگام بارگذاری صفحه فوکوس (تمرکز) بر روی input را تعیین می کند.
checked	checked	گزینه یا گزینه های انتخاب شده پیش فرض چک باکس و دکمه رادیویی را هنگام بارگذاری صفحه مشخص می کند.
dirname	inputname.dir	جهت متن را تعیین می کند.
disabled	disabled	عنصر input را غیر فعال می کند.
form	form_id	فرم مربوط به عنصر input را مشخص می کند.
formaction	URL	آدرس فایلی که هنگام ارسال فرم، اطلاعات را دریافت و پردازش می کند مشخص می کند. برای نوع submit و image استفاده می شود.
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	نحوه رمزگذاری داده های فرم را هنگام ارسال به سرور مشخص می کند. برای نوع submit و image استفاده می شود.
formmethod	get post	متد ارسال اطلاعات از فرم به سرور را مشخص می کند. برای نوع submit و image استفاده می شود.
formnovalidate	formnovalidate	مشخص می کند فیلدهای ورودی برای ارسال به سرور نیاز به اعتبارسنجی ندارد.
formtarget	_blank _self _parent _top framename	نحوه باز شدن صفحه مقصد پس از ارسال داده ها رامشخص می کند. برای نوع submit و image استفاده می شود.
height	pixels	ارتفاع عنصر <input> را برای نوع image مشخص می کند.
list	datalist_id	این ویژگی به عنصر <datalist> اشاره دارد که شامل گزینه های از پیش تعریف شده برای یک عنصر <input> است.
max	number date	حداکثر مقدار ورودی را برای یک عنصر input مشخص می کند.
maxlength	number	حداکثر تعداد کاراکترهای مجاز در یک عنصر input را تعیین می کند.
min	number date	حداقل مقدار ورودی برای عنصر <input> را مشخص می کند.
multiple	multiple	امکان انتخاب چندین گزینه به صورت همزمان در عنصر input توسط کاربر را فراهم می کند.
name	text	نام عنصر <input> را مشخص می کند.
pattern	regexp	یک الگو برای بررسی اعتبار یک فیلد ورودی تعیین می کند.
placeholder	text	تعیین توضیح کوتاه دریافت اطلاعات برای کاربر
readonly	readonly	مشخص می کند که فیلد input فقط خواندنی است.
required	required	مشخص می کند که فیلد input حتما باید یک مقدار داشته باشد و نمی تواند خالی باشد.
size	number	مشخص می کند چه تعداد کاراکترها در فیلد <input> قابل ورود هستند.
src	URL	آدرس تصویر دکمه ارسال در نوع image را مشخص می کند.
step	number	تعداد فواصل قانونی (تعداد یا میزان پرش بین اعداد) برای فیلد input را مشخص می کند.
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	نوع input را تعیین می کند.
value	text	مقدار پیش فرض فیلد input را مشخص می کند.
width	pixels	پهنای عنصر input برای نوع image را مشخص می کند.