The correct place for easy learning....: Html Input Attributes

The value Attribute

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

Note : Input fields with initial (default) values:

Example

<!DOCTYPE html>

<html>

<title>HTML Tutorials</title>

<body>

<form>

<label for="fname">First name:</label><br>

</form>

</body>

</html>

The readonly Attribute

The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The value of a read-only input field will be sent when submitting the form.

Example

<!DOCTYPE html>

<html>

<title>HTML Tutorials</title>

<body>

<form>

<label for="fname">First name:</label><br>

</form>

</body>

</html>

The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Prasanjeet" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Ghosh">
<input type="submit" value ="GO">
</form>
</body>
</html>

The placeholder Attribute

The placeholder attribute adds a hint to an input or textarea element.

The hint appears as muted text inside the control. It disappears when the user starts entering data.

The placeholder attribute works with the following input types: text,password,email, search, url, tel.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" name="firstname" placeholder="Enter first name"><br /> <br />
<label for="lname">Last name:</label><br>
<input type="text" name="lastname" placeholder="Enter last name"><br /> <br />
<input type="submit" value ="GO">
</form>
</body>
</html>

The required Attribute

The required attribute on an input element specifies that data must be provided before the form can be submitted.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="firstname">*First name</label><br/>
<input type="text" id="firstname" name="firstname" required><br />
<label for="lastname">*Last name</label><br/>
<input type="text" id="lastname" name="lastname" required><br /><br />
<input type="submit" Value ="GO">
</form>
</body>
</html>

The autofocus Attribute

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

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="name">Name:</label><br>
<input autofocus type="text" name="name" placeholder="Enter your name"><br /> <br />
<input type="submit" value ="GO">
</form>
</body>
</html>

The autocomplete Attribute

The input autocomplete attribute attribute specifies to the browser that input can be auto-filled with previously entered values.

Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value ="GO">
</form>
</body>
</html>

The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="fname">Full name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pincode">PinCode:</label><br>
<input type="text" id="pincode" name="pincode" size="6"><br><br>
<input type="submit" value ="GO">
</form>
</body>
</html>

The multiple Attribute

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

The multiple attribute works with the following input types: email, and file.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
</body>
</html>

The maxlength Attribute

The maxlength attribute on an element specifies the maximum number of characters that can be entered.

Elements that accept this attribute includes <input> and <textarea>.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="title">Book Title  </label>
<input type="text" id="booktitle" name="booktitle"
maxlength="10"><br /><br />
<input type="submit" value="GO">
</form>
</body>
</html>

The height and width Attributes

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

Example

<!DOCTYPE html>

<html>

<title>HTML Tutorials</title>

<body>

<form>

</form>

</body>

</html>

The min and max Attributes

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

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="month">Month (between 1 and 12):</label>
<input type="number" id="month" name="month" min="1" max="12">
</form>
</body>
</html>

The formnovalidate Attribute

The input formnovalidate attribute specifies that an <input> element should not be validated when submitted.

The formnovalidate attribute works with the following input types: submit.

Example

<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<form action="action.html">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
</body>
</html>

The correct place for easy learning....

Html Input Attributes

The disabled Attribute

The placeholder Attribute

The autofocus Attribute

The autocomplete Attribute

The size Attribute

The multiple Attribute

The height and width Attributes

The min and max Attributes

The formnovalidate Attribute

No comments:

Post a Comment