First of all in this “Input Restriction in HTML” lesson you will understand how to manipulate with html input also how to put some restriction in them.
Some manipulate: readonly, value, disabled, size, max, min, maxlength, autofocus, novalidate …….

This Video Explain Same Content:

Value Attribute

value attribute specifies the starter value for an input field.

For Example:

 <form action="">
   Full Name:<br>
  <input type="text" name="fullname"   value="Ahmed">
</form>   

Result:

Readonly Attribute

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

For Example:

 <form action="">
   Full Name:<br>
  <input type="text" name="fullname" readonly="readonly"  value="Ahmed">
</form>  

Result:

Disabled Attribute

disabled attribute specifies that the input field is disabled. A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form.

For Example:

<form action="">
   Full Name:<br>
  <input type="text" name="fullname" disabled="disabled"  value="Ahmed">
</form>

Result:

Size Attribute

size attribute specifies the size (in characters) for the input field.

For Example:

<form action="">
   Full Name (size=5):<br>
  <input type="text" name="fullname" size="5">
</form>

Result:

Maxlength Attribute

maxlength attribute specifies the maximum allowed length for the input field.

For Example:

<form action="">
   Full Name (maxlength=5):<br>
  <input type="text" name="fullname" Maxlength="5">
</form>

Result:

This post is one of the HTML5 for deep understanding course. Also where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References: http://www.w3schools.com