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