Detailed explanation of HTML form elements (Part 2)

HTML Input Attributes

The value attribute

The value attribute specifies the initial value of the input field:

<form action="">
<input type="text" name="name" value="123WORDPRESS.COM">
</form>

readonly attribute

The readonly attribute specifies that an input field is read-only (cannot be modified):

<form action="">
<input type="text" name="name" value="123WORDPRESS.COM" readonly>
</form>

A readonly attribute does not require a value. It is equivalent to readonly="readonly".

The disabled attribute

The disabled attribute specifies that the input field is disabled;
Disabled elements are unavailable and unclickable;
Disabled elements will not be submitted.

<form action="">
<input type="text" name="name" value="123WORDPRESS.COM" disabled >
</form>

The disabled attribute does not require a value. This is equivalent to disabled="disabled".

size attribute

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

<form action="">
<input type="text" name="name" value="123WORDPRESS.COM" size="40">
</form>

The maxlength attribute

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

<form action="">
<input type="text" name="name" value="123WORDPRESS.COM" maxlength="10">
</form>

If the maxlength attribute is set, the input control will not accept more characters than the allowed number.
This property does not provide any feedback. If you need to alert the user, you must write JavaScript code.
NOTE: Input restrictions are not foolproof. JavaScript provides many ways to add invalid input. To restrict input securely, the recipient (server) must also check the restrictions.

The width attribute

Defines the width of the input field. (Applicable to type="image"):

<form action="">
<input type="image" name="img" src="xxx.jpg" width="100">
</form>

height property

Defines the height of the input field. (Applicable to type="image"):

<form action="">
<input type="image" name="img" src="xxx.jpg" height="100">
</form>

src Attribute

Defines the URL of an image to be displayed in the submit button form:

<form action="">
<input type="image" name="img" src="xxx.jpg" width="100">
</form>

name attribute

Define the name of the input element:

<form action="">
<input type="image" name="img" src="xxx.jpg" width="100">
</form>

The checked attribute

Specifies that this input element should be selected when first loaded:

<form action="">
<input type="radio" name="single choice" checked>
</form>

The accept attribute

Specifies the type of file to be submitted via file upload:

<form action="">
<input type="file" name="Upload file" accept="text/css">
</form>