Understanding Floating Input Labels in HTML5 Validation

In my previous write up we discussed creating HTML forms. We have discussed how HTML forms and forms label has been trending as one of the most sought-after using this platform. Today in this article, we shall walk in detail via validation through simple booking form by using the Constraint API, and focus how to keep your users stay for longer time duration.

From previous years, we have been using “too long; didn’t read” which is abbreviated as “TL;DR.” It has replaced the JavaScript validation with HTML5 validation. It offers a ton of markup and styling control.

At present, to create a Validate form, we begin from server-side validation. A good designer appends in some client side validation which helps to get feedback from your users. This assures the users that they have entered a valid email ID. Now you transfer to the jQuery library. You may also put some extra markup or re-style or add some JavaScript validation rules. One may also use AJAX to connect the JavaScript to the server.

Understanding HTML5 Form Validation

To commence using the new input types and attributes, one does not have to anything great! You can proceed with using the new input types and attributes. You add attributes like required or type=”email” to <input> fields, and your browser does the rest.

So now you have clear picture about HTML5 Form Validation, I will now enhance this form by adding some more HTML5 browser-side validation attributes. They are “Require” and “Pattern.” Both of these attributes are essential to offer an an automatic validation mechanism to fulfill the input field without using JavaScript.

Required Attribute: This attribute specifies that all the input field must be completed before submitting the form. It works well with the following input types: Date selectors, Search, URL, Email IDs, Text, Password, Checkbox, radio, and file.

<form action="action.php">
<input type="text" name="name" placeholder="Name" required>
</form>

Pattern Attribute: This attribute verifies the input format to harmonize defined regex. It is applicable on input element. It utilizes Regular Expressions (RegEx) and gives leverage to developer to define their own rule to validate the input value. And if if the value does not goes with the specified pattern, the input will throw an fallacy.

Let’s understand with an example:

Suppose you have a user name input in your form. There is no standard type for user name, hence we use the regular text input type:

<form action="action.php">
<input type="text" name="name" placeholder="Name">
</form>

Now let’s mention a rule for adding the pattern attribute. Here it will be clear that the user name will be consist of lowercase letters. We will avoid using special characters, upercase letters, numbers and should be less than 15 characters. In RegEx, this rule can be expressed as [a-z]{1,15}.

Add[a-z]{1,15}as the value of the pattern attribute in our username input:

<form action="action.php">
<input type="text" name="name" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Now, as it accepts only the lowercase letters, it will throw an error message while submitting any other value.

The CSS3 Styling

Well now that you have made your form, its time to beautify it. We can style it using CSS3 transitions and transformations. You must assure to keep your browser updated so that it supports CSS3.

label, input, textarea, fieldset {
display:block;
}
fieldset#account, fieldset#personal {
width:200px;
padding:0 20px 20px;
margin:5px;
float:left;
background:#CCC;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

fieldset#confirm {
padding-top:5px;
clear:both;
border:none;
line-height:17px;
margin:5px 0;
}

fieldset#confirm label, fieldset#confirm input {
display:inline;
float:left;
margin:10px 7px 0;
}

legend{
font-size:16px;
font-weight:bold;
color:#777;
margin-left:-25px;
text-align:left;
padding:0 5px;
}

label {
font-size:14px;
font-weight:bold;
margin:15px 0 5px;
text-align:left;
}

input.textbox, textarea {
padding:7px 12px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #AAA;
width:180px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background:#FEFEFE;
}

textarea {
resize:both;
max-width:200px;
}

input.textbox:focus, textarea:focus {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
-moz-box-shadow: 4px 3px 1px #ccc;
-webkit-box-shadow: 4px 3px 1px #ccc;
box-shadow: 4px 3px 1px #ccc;
text-shadow:1px 1px 2px #555;
}

input[type=submit] {
padding:7px;
margin:0 5px;
width:250px;
}

#rangevalue {
display:block;
text-align:right;
margin-top:-20px;
}

 

/* style */

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #bbb;
font-style:italic;
}

input:-moz-placeholder, textarea:-moz-placeholder {
color: #bbb;
font-style:italic;
}

For your knowledge, I am here explaining about Focus, Required, Valid and Invalid.

1. :FocusIt is applicable when an element has received focus. It can be from the use of users keyboard or with the use of mouse (e.g. a form input). It is well supported by Google Chrome, Firefox, Internet Explorer, Opera and Safari.Example:

   .first-name:focus {
   color: #FF0000;
   }
   
   .last-name:focus {
   color: lime;
   }
   

   2nd Example:

   <input class="first-name" value="I'll be red when focused">
   <input class="last-name" value="I'll be lime when focused">

2. :RequiredIt allows to choose and beautify the similar elements with the required attribute. The forms indicates which fields are mandatory to fill the form, and avoids the users from incurring time by having the server be the sole validator of the user’s input.Let’s say we have an input with an attribute of type=”name” and make it a required input using the required boolean attribute:

   HTML
   <input type=”name” name=”fname” required>

   Now we can style that input using the:required

   css
   /* style all elements with a required attribute */ :required { background: #ffoooo; }

3. :Valid:Valid is used to style interactive elements based on an evaluation of user input. It is used for providing a user with feedback while they are interacting with a form on the page. It is interesting to note that :valid can be “chained” with other pseudo-selectors: like:focus to only validate when the user is typing,:before or:after to generate icons or text to provide more user feedback, or attribute selectors like input[value=””] to only validate input fields containing content.
4. :Invalid:Invalid is used to style interactive elements based on an evaluation of user input. It permits the user to select <input> elements that do not contain valid content. It is used for providing feedback to the user while they are interacting with a form on the page. It is interesting to note that :invalid can be “chained” with other pseudo-selectors: like :focus to only validate when the user is typing, :before or :after to generate icons or text to provide more user feedback, or attribute selectors like input[value=””] to only validate input fields containing content.

How to use it:

Create text fields (input or textarea) with text labels.

<div class="field-style">
<input type="text" required />
<label>Name</label>
<span></span> </div>
<div class="field-style wide">
<textarea required></textarea>
<label>Message</label>
<span></span> </div>

The CSS styles to animate the floating labels when your text fields are focused on.

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
font-size: 14px;
color: #7d339c;
top: -30px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;

}

.field-style {
float: left;
width: 48%;
margin: 5px 0;
position: relative;
}

.field-style label {
color: #888;
padding: 5px;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.field-style.wide { width: 100%; }

input, textarea {
padding: 10px;
border: none;
width: 100%;
font-size: 15px;
}

input ~ span, textarea ~ span {
display: block;
width: 0;
height: 2px;
background: #773592;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

input:focus, textarea:focus { outline: 0; }

input:focus ~ span,textarea:focus ~ span {
width: 100%;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}

textarea {
width: 100%;
min-height: 50px;
}

Author Bio :
Claudia is a working as a trained Magento developer with Magentax, Magento development company which has the prestige of having delivered flawless Magento services and solutions to global clientele.

Facebook : https://www.facebook.com/magentax.ltd
Twitter : https://twitter.com/magentaxltd
Pinterest : https://in.pinterest.com/Magentaxltd/