طراحی سایت

HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
ویژگی value
این ویژگی مقدار اولیه ی یک input در فرم ما را مشخص می کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The value Attribute

The value attribute specifies the initial value for an input field:

 

First name:




Last name:

 


مشاهده ی خروجی در JSBin

ویژگی readonly
این ویژگی باعث می شود که input ما read only شود یعنی هیچکس نتواند آن را تغییر دهد:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):

 

First name:




Last name:

 


مشاهده ی خروجی در JSBin

ویژگی disabled
این ویژگی باعث می شود که input ما غیرفعال شود. input ای که غیرفعال باشد، غیر قابل کلیک کردن و تغییر دادن است و همچنین مقدار آن در هنگام submit (ارسال نهایی) فرم به سرور ارسال نمی شود:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The disabled Attribute

The disabled attribute specifies that the input field is disabled:

 

First name:




Last name:

 


مشاهده ی خروجی در JSBin

ویژگی size
این ویژگی سایز یک input را بر اساس تعداد کاراکتر تعیین می کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The size Attribute

The size attribute specifies the size (in characters) of the input field:

 

First name:

 



Last name:

 


مشاهده ی خروجی در JSBin

ویژگی maxlength
این ویژگی حداکثر طول مجاز یک input را برای کاربر تعیین می کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field:

 

First name:




Last name:

 


مشاهده ی خروجی در JSBin

به طور مثال اگر مقدار maxlength را 5 بگذارید دیگر فرم اجازه ی تایپ بیشتر از 5 کاراکتر را به کاربر نمی دهد اما توجه داشته باشید که این ویژگی هیچ هشداری به کاربر نمیدهد بنابراین اگر میخواهید پیامی برای کاربر نمایش داده شود و به او بگوید که این فیلد محدود است و یا اینکه چرا این فیلد محدود است باید از کد های جاوا اسکریپت یا روش های دیگر استفاده کنید.(ایران گستر)

هشدار: تمام روش های محدود سازی با HTML (مانند مثال بالا) و Javascript قابل دور زدن هستند و اصلا امن نیستند، بلکه تنها برای راحتی سرور شما و خود کاربران ایجاد شده اند. لازم است که حتما و حتما داده ها را در سمت سرور نیز چک کنید.(ایران گستر)
 
ویژگی autocomplete
این ویژگی می گوید که آیا یک فرم قابلیت autocomplete (تکمیل خودکار) داشته باشد یا خیر. زمانی که autocomplete فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس مقادیری که کاربر قبلا وارد کرده است پر می کند. autocomplete با عنصر 

 و  های متنی، جست و جو، URL، تلفن، ایمیل، رمز عبور، datepicker ها، محدوده و رنگ ها کار می کند.(ایران گستر)

نکته: شما می توانید autocomplete را برای کل فرم () فعال کرده و سپس برای برخی از input ها غیر فعالش کنید.(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18



 

The autocomplete Attribute

 

  First name:

  Last name:

  E-mail:

  

 

فرم را پر کرده و سپس ارسال کنید. حالا یک بار صفحه را refresh کنید تا ببینید قابلیت تکمیل خودکار چطور کار می کند.

توجه کنید که قابلیت تکمیل خودکار برای email غیر فعال است.

 


مشاهده ی خروجی

برای مشاهده ی خروجی در صفحه مورد نظر کلید Run را بزنید.

 

ویژگی novalidate
این ویژگی میگوید که داده های فرم در هنگام ارسال نباید Validate (اعتبار سنجی) شوند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16



 

The novalidate Attribute

The novalidate attribute specifies that the form data should not be validated when submitted.

 

E-mail:

 

هشدار: این قابلیت در مرورگر های internet explorer 9 و نسخه های قبل آن و همچنین در safari 10 و نسخه های قبل آن کار نمی کند.

 


مشاهده ی خروجی در JSBin

 

ویژگی autofocus
این ویژگی باعث می شود که پس از بارگذاری صفحه، یکی از input های ما (به انتخاب خودمان) focus بگیرد (یعنی بدون کلیک کاربر فعال شود):(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads.

 

  First name:

  Last name:

  

 

هشدار:این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.

 


مشاهده ی خروجی در JSBin

پس از ورود به صفحه ی خروجی دکمه ی RUN را بزنید و متوجه خواهید شد که فیلد اول انتخاب شده است و آماده ی تایپ کردن شماست! این همان حالت focus است.(ایران گستر)

 

ویژگی form
این ویژگی مشخص می کند که فلان  متعلق به کدام فرم و یا چند فرم است:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The form Attribute

The form attribute specifies one or more forms an input element belongs to.

 

First name:

 

فیلد Last name که در زیر مشاهده می کنید خارج از form بالا است اما هنوز هم به آن تعلق دارد.

Last name:
 


مشاهده ی خروجی در 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



 

The formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

 

  First name:

  Last name:

  

  

 

هشدار:این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.

 


مشاهده ی خروجی در 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



 

The formenctype Attribute

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post").

 

  First name:

  
  

 

هشدار:این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.

 


مشاهده ی خروجی در 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



 

The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

 

  First name:

  Last name:

  
  

 

هشدار:این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.

 


مشاهده ی خروجی در JSBin

 

ویژگی formnovalidate
این ویژگی، novalidate را باطل کرده و تغییر میدهد و با  "type="submit استفاده می شود:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The formnovalidate Attribute

 

  E-mail:

  

  

 

هشدار:این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.

 
 


مشاهده ی خروجی در 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



 

The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

 

  First name:

  Last name:

  
  

 
 

هشدار:این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.

 


مشاهده ی خروجی در JSBin

 

ویژگی height و width
این دو ویژگی عرض و ارتفاع <"input type="image> را مشخص می کنند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15



 

The height and width Attributes

The height and width attributes specify the height and width of an input type="image" element.

 

  First name:

  Last name:

  

 


مشاهده ی خروجی در JSBin

 

ویژگی list
این ویژگی به 

 
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



 

The list Attribute

The list attribute refers to a datalist element that contains pre-defined options for an input element.

 

 

 

هشدار:
 
این قابلیت در internet explorer 9 و نسخه های قبل تر آن  و همچنین در safari پشتیبانی نمی شود.
 

 


مشاهده ی خروجی در JSBin

 

ویژگی min و max
این دو ویژگی حداقل و حداکثر مقادیر مجاز برای  را تعیین می کنند و با 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



 

The min and max Attributes

The min and max attributes specify the minimum and maximum values for an input element.

 

 
  Enter a date before 1980-01-01:
  

 
  Enter a date after 2000-01-01:
  

 
  Quantity (between 1 and 5):
  

 
  
  

 

هشدار:این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند

 

هشدار:این دو ویژگی اگر برای تاریخ و زمان به کار بروند در مرورگر Internet explorer 10 کار نمی کنند.

 
 


مشاهده ی خروجی در JSBin

 

ویژگی multiple
این ویژگی مشخص می کند که کاربر می تواند بیشتر از یک مقدار را در  وارد کند. این ویژگی با  های از نوع ایمیل و فایل کار می کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19



 

The multiple Attributes

The multiple attribute specifies that the user is allowed to enter more than one value in the input element.

 

  Select images:
  

 

Try selecting more than one file when browsing for files.

 
 

هشدار:این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند

 


مشاهده ی خروجی در JSBin

 

ویژگی pattern
این ویژگی از regular expression (عبارات با قاعده) استفاده می کند تا محتوای فرم را چک کند و با انواع input های متنی، جست و جو، URL، تلفن، ایمیل و رمز عبور کار می کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16



 

The pattern Attribute

The pattern attribute specifies a regular expression that the input element's value is checked against.

 

  Country code:
  

 

هشدار:این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.

 


مشاهده ی خروجی در JSBin

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

نکته: برای اینکه به کاربر کمک کنید تا بهتر متوجه الگوی درخواستی بشود از attribute ای به نام title استفاده کنید.(ایران گستر)

 

ویژگی placeholder
این ویژگی متنی کوتاه را در فیلد مورد نظر نشان می دهد تا به کاربر توضیحات خلاصه ای ارائه کند. به طور مثال اگر میخواهید به کاربر بگویید که در این قسمت با حروف انگلیسی تایپ کند می توانید از این ویژگی استفاده کنید. این ویژگی با input های متنی، جست و جو، URL، تلفن، ایمیل و رمز کاربری کار می کند:(ایران گستر)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



 

The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).

 

  

  

  

 

هشدار:این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند

 


مشاهده ی خروجی در 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



 

The required Attribute

The required attribute specifies that an input field must be filled out before submitting the form.

 

  Username:
  

 

هشدار:این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن و همچنین در Safari 10.1 و نسخه های قبل تر آن کار نمی کند.

 


مشاهده ی خروجی در JSBin

 

ویژگی step
این ویژگی بازه های مجاز برای یک  را تعیین می کنند. به طور مثال اگر این ویژگی برابر با 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



 

The step Attribute

The step attribute specifies the legal number intervals for an input element.

 

  
  

 

هشدار:این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن کار نمی کند.

 


مشاهده ی خروجی در JSBin

برچسب: ،