در قسمت های قبلی با انواع input ها در فرم ها آشنا شدیم و عناصر مختلف آن ها را بررسی کردیم اما در این قسمت میخواهیم به سراغ Attribute (ویژگی) های یک فرم و کارایی های آن برویم. این ویژگی ها به فرم های ما پویایی داده و باعث می شود خطاهای کاربری کمتر شوند بنابراین آشنایی با آنها و استفاده ی صحیح از آن ها بسیار مهم است.
ویژگی value
این ویژگی مقدار اولیه ی یک input در فرم ما را مشخص می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The value Attribute</h2>
<p>The value attribute specifies the initial value foran input field:</p>
<form action="">
First name:<br>
<input type="text"name="firstname"value="John">
<br>
Last name:<br>
<input type="text"name="lastname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی readonly
این ویژگی باعث می شود که input ما read only شود یعنی هیچکس نتواند آن را تغییر دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The readonly Attribute</h2>
<p>The readonly attribute specifies that the input field isread only(cannot be changed):</p>
<form action="">
First name:<br>
<input type="text"name="firstname"value="John"readonly>
<br>
Last name:<br>
<input type="text"name="lastname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی disabled
این ویژگی باعث می شود که input ما غیرفعال شود. input ای که غیرفعال باشد، غیر قابل کلیک کردن و تغییر دادن است و همچنین مقدار آن در هنگام submit (ارسال نهایی) فرم به سرور ارسال نمی شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The disabled Attribute</h2>
<p>The disabled attribute specifies that the input field isdisabled:</p>
<form action="">
First name:<br>
<input type="text"name="firstname"value="John"disabled>
<br>
Last name:<br>
<input type="text"name="lastname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی size
این ویژگی سایز یک input را بر اساس تعداد کاراکتر تعیین می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The size Attribute</h2>
<p>The size attribute specifies the size(incharacters)of the input field:</p>
<form action="">
First name:<br>
<input type="text"name="firstname"value="John"size="40">
<br>
Last name:<br>
<input type="text"name="lastname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی maxlength
این ویژگی حداکثر طول مجاز یک input را برای کاربر تعیین می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The maxlength Attribute</h2>
<p>The maxlength attribute specifies the maximum allowed length forthe input field:</p>
<form action="">
First name:<br>
<input type="text"name="firstname"maxlength="10">
<br>
Last name:<br>
<input type="text"name="lastname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به طور مثال اگر مقدار maxlength را 5 بگذارید دیگر فرم اجازه ی تایپ بیشتر از 5 کاراکتر را به کاربر نمی دهد اما توجه داشته باشید که این ویژگی هیچ هشداری به کاربر نمیدهد بنابراین اگر میخواهید پیامی برای کاربر نمایش داده شود و به او بگوید که این فیلد محدود است و یا اینکه چرا این فیلد محدود است باید از کد های جاوا اسکریپت یا روش های دیگر استفاده کنید.
هشدار: تمام روش های محدود سازی با HTML (مانند مثال بالا) و Javascript قابل دور زدن هستند و اصلا امن نیستند، بلکه تنها برای راحتی سرور شما و خود کاربران ایجاد شده اند. لازم است که حتما و حتما داده ها را در سمت سرور نیز چک کنید.
ویژگی autocomplete
این ویژگی می گوید که آیا یک فرم قابلیت autocomplete (تکمیل خودکار) داشته باشد یا خیر. زمانی که autocomplete فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس مقادیری که کاربر قبلا وارد کرده است پر می کند. autocomplete با عنصر <form> و <input> های متنی، جست و جو، URL، تلفن، ایمیل، رمز عبور، datepicker ها، محدوده و رنگ ها کار می کند.
نکته: شما می توانید autocomplete را برای کل فرم (<form>) فعال کرده و سپس برای برخی از input ها غیر فعالش کنید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php"autocomplete="on">
First name:<input type="text"name="fname"><br>
Last name:<input type="text"name="lname"><br>
E-mail:<input type="email"name="email"autocomplete="off"><br>
<input type="submit">
</form>
<pdir='rtl'>فرمراپرکردهوسپسارسالکنید.حالایکبارصفحهراrefreshکنیدتاببینیدقابلیتتکمیلخودکارچطورکارمیکند.</p>
<pdir='rtl'>توجهکنیدکهقابلیتتکمیلخودکاربرایemailغیرفعالاست.</p>
</body>
</html>
|
مشاهده ی خروجی
برای مشاهده ی خروجی در صفحه مورد نظر کلید Run را بزنید.
ویژگی novalidate
این ویژگی میگوید که داده های فرم در هنگام ارسال نباید Validate (اعتبار سنجی) شوند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<h2>The novalidate Attribute</h2>
<p>The novalidate attribute specifies that the form data should notbe validated when submitted.</p>
<form action="/action_page.php"novalidate>
E-mail:<input type="email"name="user_email">
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرمرورگرهایinternet explorer9ونسخههایقبلآنوهمچنیندرsafari10ونسخههایقبلآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی autofocus
این ویژگی باعث می شود که پس از بارگذاری صفحه، یکی از input های ما (به انتخاب خودمان) focus بگیرد (یعنی بدون کلیک کاربر فعال شود):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The autofocus Attribute</h2>
<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>
<form action="/action_page.php">
First name:<input type="text"name="fname"autofocus><br>
Last name:<input type="text"name="lname"><br>
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
پس از ورود به صفحه ی خروجی دکمه ی RUN را بزنید و متوجه خواهید شد که فیلد اول انتخاب شده است و آماده ی تایپ کردن شماست! این همان حالت focus است.
ویژگی form
این ویژگی مشخص می کند که فلان <input> متعلق به کدام فرم و یا چند فرم است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The form Attribute</h2>
<p>The form attribute specifies one ormore forms an input element belongs to.</p>
<form action="/action_page.php"id="form1">
First name:<input type="text"name="fname"><br>
<input type="submit"value="Submit">
</form>
<pdir='rtl'>فیلدLast nameکهدرزیرمشاهدهمیکنیدخارجازformبالااستاماهنوزهمبهآنتعلقدارد.</p>
Last name:<input type="text"name="lname"form="form1">
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: در صورتی که میخواهید یک فیلد را به چند فرم نسبت دهید از ویرگول انگلیسی بین آن ها استفاده کنید.
ویژگی formaction
این ویژگی مسیر فایلی را مشخص می کند که قرار است فرم ما را پردازش کند. این ویژگی action را باطل می کند و با"type="submit و "type="image استفاده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>The formaction Attribute</h2>
<p>The formaction attribute specifies the URL ofafile that will process the input control when the form issubmitted.</p>
<form action="/action_page.php">
First name:<input type="text"name="fname"><br>
Last name:<input type="text"name="lname"><br>
<input type="submit"value="Submit"><br>
<input type="submit"formaction="/action_page2.php"value="Submit to another page">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی formenctype
این ویژگی encoding ارسال فرم را تعیین می کند (فقط برای فرم های “method=”post) و attribute قبلی فرم یعنیenctype را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The formenctype Attribute</h2>
<p>The formenctype attribute specifies how the form data should be encoded when submitted(only forforms with method="post").</p>
<form action="/action_page_binary.asp"method="post">
First name:<input type="text"name="fname"><br>
<input type="submit"value="Submit">
<input type="submit"formenctype="multipart/form-data"value="Submit as Multipart/form-data">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی formmethod
این ویژگی متد HTTP برای ارسال فرم ها به action را تعیین می کند و attribute قبلی فرم یعنی method را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>The formmethod Attribute</h2>
<p>The formmethod attribute defines the HTTP method forsending form-data tothe action URL.</p>
<form action="/action_page.php"method="get">
First name:<input type="text"name="fname"><br>
Last name:<input type="text"name="lname"><br>
<input type="submit"value="Submit">
<input type="submit"formmethod="post"value="Submit using POST">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی formnovalidate
این ویژگی، novalidate را باطل کرده و تغییر میدهد و با "type="submit استفاده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The formnovalidate Attribute</h2>
<form action="/action_page.php">
E-mail:<input type="email"name="userid"><br>
<input type="submit"value="Submit"><br>
<input type="submit"formnovalidate value="Submit without validation">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنوهمچنیندرsafari10ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی formtarget
این ویژگی مشخص می کند که مرورگر جواب دریافتی از سرور (پس از ارسال فرم) را کجا نمایش دهد. این ویژگی attribute قبلی فرم یعنی target را باطل می کند و این ویژگی با "type="submit و "type="image استفاده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<body>
<h2>The formtarget Attribute</h2>
<p>The formtarget attribute specifiesaname orakeyword that indicates where todisplay the response that isreceived after submitting the form.</p>
<form action="/action_page.php">
First name:<input type="text"name="fname"><br>
Last name:<input type="text"name="lname"><br>
<input type="submit"value="Submit as normal">
<input type="submit"formtarget="_blank"value="Submit to a new window/tab">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی height و width
این دو ویژگی عرض و ارتفاع <"input type="image> را مشخص می کنند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>The height andwidth Attributes</h2>
<p>The height andwidth attributes specify the height andwidth of an input type="image"element.</p>
<form action="/action_page.php">
First name:<input type="text"name="fname"><br>
Last name:<input type="text"name="lname"><br>
<input type="image"src="https://www.w3schools.com/html/img_submit.gif"alt="Submit"width="48"height="48">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی list
این ویژگی به <datalist> اشاره می کند که گزینه های از پیش تعریف شده ای برای <input> دارد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html>
<body>
<h2>The list Attribute</h2>
<p>The list attribute refers toadatalist element that contains pre-defined options foran input element.</p>
<form action="/action_page.php"method="get">
<input list="browsers"name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>
اینقابلیتدرinternet explorer9ونسخههایقبلترآن وهمچنیندرsafariپشتیبانینمیشود.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی min و max
این دو ویژگی حداقل و حداکثر مقادیر مجاز برای <input> را تعیین می کنند و با input های عددی، محدوده ای، تاریخ، datetime-local، ماه، زمان و هفته کار می کند (اگر با انواع input ها آشنا نیستید به قسمت های قبل از همین سری آموزشی مراجعه کنید):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<body>
<h2>The min andmax Attributes</h2>
<p>The min andmax attributes specify the minimum andmaximum values foran input element.</p>
<form action="/action_page.php">
Enteradate before1980-01-01:
<input type="date"name="bday"max="1979-12-31"><br>
Enteradate after2000-01-01:
<input type="date"name="bday"min="2000-01-02"><br>
Quantity(between1and5):
<input type="number"name="quantity"min="1"max="5"><br>
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیدرمرورگرInternet Explorer9ونسخههایقبلترآنکارنمیکنند</p>
<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیاگربرایتاریخوزمانبهکاربرونددرمرورگرInternet explorer10کارنمیکنند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی multiple
این ویژگی مشخص می کند که کاربر می تواند بیشتر از یک مقدار را در <input> وارد کند. این ویژگی با <input> های از نوع ایمیل و فایل کار می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<body>
<h2>The multiple Attributes</h2>
<p>The multiple attribute specifies that the user isallowed toenter more than one value inthe input element.</p>
<form action="/action_page.php">
Select images:<input type="file"name="img"multiple>
<input type="submit">
</form>
<p>Tryselecting more than one file when browsing forfiles.</p>
<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیدرمرورگرInternet Explorer9ونسخههایقبلترآنکارنمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی pattern
این ویژگی از regular expression (عبارات با قاعده) استفاده می کند تا محتوای فرم را چک کند و با انواع input های متنی، جست و جو، URL، تلفن، ایمیل و رمز عبور کار می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<h2>The pattern Attribute</h2>
<p>The pattern attribute specifiesaregular expression that the input element's value is checked against.</p>
<form action="/action_page.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
<p dir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنوهمچنیندرsafari10ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مبحث عبارات با قاعده از مباحث بسیار طولانی در دنیای برنامه نویسی است و نمی شود آن را در این مقاله توضیح داد. اگر با آن ها آشنایی ندارید باید در اینترنت به دنبالشان بگردید و مقالات مختلف در این زمینه را مطالعه کنید.
نکته: برای اینکه به کاربر کمک کنید تا بهتر متوجه الگوی درخواستی بشود از attribute ای به نام title استفاده کنید.
ویژگی placeholder
این ویژگی متنی کوتاه را در فیلد مورد نظر نشان می دهد تا به کاربر توضیحات خلاصه ای ارائه کند. به طور مثال اگر میخواهید به کاربر بگویید که در این قسمت با حروف انگلیسی تایپ کند می توانید از این ویژگی استفاده کنید. این ویژگی با input های متنی، جست و جو، URL، تلفن، ایمیل و رمز کاربری کار می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>The placeholder Attribute</h2>
<p>The placeholder attribute specifiesahint that describes the expected value of an input field(asample value orashortdescription of the format).</p>
<form action="/action_page.php">
<input type="text"name="fname"placeholder="First name"><br>
<input type="text"name="lname"placeholder="Last name"><br>
<input type="submit"value="Submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیدرمرورگرInternet Explorer9ونسخههایقبلترآنکارنمیکنند</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی required
این ویژگی تعیین می کند که فلان فیلد این فرم اجباری است و حتما باید پُر شود و با انواع فیلد های text, search, url, tel, email, password, date pickers, number, checkbox, radio, و file کار می کند.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<h2>The required Attribute</h2>
<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>
<form action="/action_page.php">
Username:<input type="text"name="usrname"required>
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینویژگیدرمرورگرInternet explorer9ونسخههایقبلترآنوهمچنیندرSafari10.1ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ویژگی step
این ویژگی بازه های مجاز برای یک <input> را تعیین می کنند. به طور مثال اگر این ویژگی برابر با 3 باشد (“step=”3) اعداد مجاز 3- و 0 و 3 و 6 و … خواهند بود. همچنین می توانید از max و min هم به همراه آن استفاده کنید. این ویژگی با فیلد های umber, range, date, datetime-local, month, time و week کار میکند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<h2>The step Attribute</h2>
<p>The step attribute specifies the legal number intervals foran input element.</p>
<form action="/action_page.php">
<input type="number"name="points"step="3">
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینویژگیدرمرورگرInternet explorer9ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟