dots Created with Sketch.
Yogesh Chauhan's Blog

Some interesting HTML Input Attributes to remember

in HTML on July 14, 2019

There are many HTML Input Attributes we should be aware of for a good form creation. So, let’s take a quick look at all those attributes one by one.

Attribute 1: value

<input type="text" name="name" value="Yogesh">

The value attribute displays the value for the input field. In above example, the browser will display ‘John’ in the text box as a Name and then user can change it as per their name.

What if you don’t want user to make any change into the input field?

Then there is one more attribute.

Attribute 2: readonly

<input type="text" name="name" value="Yogesh" readonly>

The readonly attribute displays the value (if the value is specified) but doesn’t let user change the value.

Attribute 3: disabled

<input type="text" name="name" value="Yogesh" disabled>

The disabled attribute displays the input element as disabled. You can use it with buttons but the user won’t be able to click on the button or send any values. The button will become unclickable and the form won’t get submitted in that case.

Attribute 4: size

<input type="text" name="name" value="Yogesh" size="25">

The size attribute will specifies the size of the input element in the number of characters. User will be able to enter more characters but the size of the input box will be as per the size specified in the input field.

I know, you’re like what’s the point of size attribute if it’s just used to set the size? What if I want to restrict the number of characters user enters?

Attribute 5: maxlength

<input type="text" name="name" value="Yogesh" maxlength="25">

That’s your answer. maxlength attribute is useful to restrict the user so that user can’t enter more than certain number of characters, for e.g. if you want user to enter 6 digit or 8 characters password only then you can surely set the limit using this attribute.

Attribute 6: autofocus

<input type="text" name="name" autofocus>

If you’ve added this autofocus attribute then that textbox will get focus automatically when the page loads.

Attributes 7 and 8: min and max

Enter a date before 1999-01-01: <input type="date" name="date" max="1999-12-31"> Enter a date after 1999-01-01: <input type="date" name="date" min="1999-01-02"> Quantity (between 10 and 50): <input type="number" name="quantity" min="10" max="50">

As you have guessed it, min and max attributes are used to set minimum and maximum input values for that element.

Attribute 9: multiple

<input type="text" name="name" multiple>

The multiple attribute will allow user to submit multiple input values whether it’s text, email or file.

Attribute 10: placeholder

<input type="text" name="name" placeholder="First name">

The placeholder attribute works like a hint. It tells user what he is expected to enter. It shows the text in grey fonts and immediately removes it as soon as the user clicks on the input field.

Attribute 11: required

<input type="text" name="name" required>

As the name suggest, it forces user to enter the value for the input element. It’s really useful when you’re making a login page and the user is required to enter userid and password both to login. Rather than using JavaScript to perform that check, use this simple attribute.

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
New to ┬áDrupal? Here’s What You Need to KnowDrupalJavaScript String fromCharCode() MethodJavaScriptHow to add today’s date in HTML input date value using JavaScript?JavaScriptHow to change the Login Logo in WordPress?WordPressapply_filters function in WordPressWordPressAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHP