input

require attribute: HTML5

Lets see how require attribute of HTML5 works.

require attribute forces the user to enter some value. But it does not validate the user input.
Example: It makes sure if the email field has some value in it but doesn’t check if the user has entered valid email address or not. It only makes sure, the required field isn’t left empty.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>required attribute: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
<label for="name">Name: </label>
 <input type="text" name="name" required/><br />
 
<label for="age">Age: </label>
 <input type="text" name="age"/><br />
 
 <input type="submit"/> 
</form>
 
</body>
</html>

Here we have 2 input fields. First input field has been made required, by using require attribute.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

require attribute: HTML5

[youtube https://www.youtube.com/watch?v=yEVyYQjMaMU]

YouTube Link: https://www.youtube.com/watch?v=yEVyYQjMaMU [Watch the Video In Full Screen.]

Note:
Server side validation is also equally important. Because someone might directly pass the value via the script present in the action field of form tag – if form uses GET method to pass user data.

Also note that, IE(Internet Explorer) doesn’t support require attribute, so you can make use of Javascript or jQuery to make sure IE users are taken care of.
Related Read: Registration Form Validation: PHP + jQuery + AJAX

Suggested Entries Using datalist Element: HTML5

Lets build a simple auto suggesting form field with the help of datalist form element of HTML5.

suggest-list-entries-datalist-form-element-html5

Here I’ve taken a text input field, and with the help of datalist element and list attribute, have built a auto suggesting form field.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Auto Suggestion using datalist Element: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" list="myCompanies"/>
<datalist id="myCompanies">
<option value="Google">
</option><option value="Apple">
</option><option value="Oracle">
</option><option value="Yahoo">
</option><option value="IBM">
</option><option value="Microsoft">
</option><option value="Technotip">
</option><option value="American Express">
</option></datalist>
 
</form>
 
</body>
</html>

Here I’ve added a list attribute to the input field and named it as myCompanies. Also have taken datalist form element with an id which matches the list attribute of the input field.

Auto Suggested Entries Using list attribute: HTML5

[youtube https://www.youtube.com/watch?v=3ExFs-lTbKY]

YouTube Link: https://www.youtube.com/watch?v=3ExFs-lTbKY [Watch the Video In Full Screen.]

Note: You can get the user entry by using key press event, and fetch the corresponding data from the database using PHP, jQuery and mySQL and auto suggest some form entries.
Make sure to fetch 5 to 10 entries only, as it may take more time and may overload the server if you don’t limit the no of entries you fetch from the database. And more over it looks confusing and cluttered, if you suggest too many things at once!

autocomplete Attribute of Form Field: HTML5

Today lets see how autocomplete attribute of HTML5 works.

Here we take 3 input fields and individually enable and disable the autocomplete feature by specifying it’s values: ON and OFF.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Form, autocomplete: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
First Name: <input type="text" name="fname" autocomplete="on"/> <br /><br />
Second Name: <input type="text" name="lname" autocomplete="on"/><br />
Email: <input type="text" name="email" autocomplete="off"/><br />
<input type="submit"/>
</form>
 
</body>
</html>

Here we have 3 input fields with autocomplete turned ON for first 2 and turned off for the last.

autocomplete Attribute of Form Field: HTML5

[youtube https://www.youtube.com/watch?v=XNjUfwDmHGc]

YouTube Link: https://www.youtube.com/watch?v=XNjUfwDmHGc [Watch the Video In Full Screen.]

Note:
To make autocomplete feature to work
1. Turn ON the autocomplete feature for form, in your browser.
2. Make sure to name all your input fields. Without naming, autocomplete feature may not work.
3. If not specified, tags will inherit autocomplete feature from its parent tag. If not turned OFF, browser will have autocomplete turned ON by default, once it is enabled in browser settings.

autocomplete=”off”
Turn off autocomplete to password fields, debit card, credit card, account number fields.

autofocus Attribute of Form Field: HTML5

Quick video to illustrate autofocus attribute of HTML5 form fields.

Here we take 3 input fields, and one field is set with autofocus attribute.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Form, Autofocus: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" />
<input type="text" />
<input type="text" autofocus/>
<button>Done</button>
</form>
 
 
</body>
</html>

In above case, the third input field gets the autofocus.

autofocus Attribute of Form Field: HTML5

[youtube https://www.youtube.com/watch?v=E1L5-5ZhZaE]

YouTube Link: https://www.youtube.com/watch?v=E1L5-5ZhZaE [Watch the Video In Full Screen.]

Note: You can also apply autofocus to the buttons, so that user can directly hit OK or CANCEL by pressing Enter key of their keyboard! – whichever is most desired.

User Input Using readline Module: Node.js

In this video tutorial we shall see how to gather user input and process it inside our node.js application.

In this application, we’ll be asking the user to enter his/her work experience and based on the user input we’ll do some logical processing and output appropriate result to the user.

readline Module
readline.js

var rl = require('readline');
 
var prompts = rl.createInterface(process.stdin, process.stdout);
prompts.question("No of years you've been working in corporate?", 
                  function(experience){
 
 var msg = "";
 
 if( experience < 5 )
  msg = "You're short of "+(5-experience)+" years experience to 
         attend job interview at Apple Inc!";
 else
  msg = "Excellent, you're eligible for the job interview!!";
 
 console.log(msg);
 process.exit();
 
});

readline module is built into node.js to facilitate user input in node applications.

createInterface method is used to create an interface for user input.
createInterface method takes 2 parameters: process.stdin and process.stdout. These are standard input and standard output properties of the current process.

Using the createInterface object, we invoke question method.

question method takes 2 parameters:
First one being the question(something which is to be prompted to the user).
Second parameter is an anonymous function.

Response of the user is passed in as argument to this anonymous function.

Inside this anonymous function, we use some simple conditional logic and display the appropriate message to the user, based on his/her input.

i.e., if the person has less than 5 years of job experience, then he/she is not eligible to the job interview at Apple inc. If the job experience is greater than 5 years, then he/she is eligible!!

Finally, we display the content of msg variable using console.log
and exit from the process.

process.exit() is very important. If we don’t exit the process, the interface keeps reading from the standard input.

User Input Using readline Module: Node.js

[youtube https://www.youtube.com/watch?v=Y1TmesiVtGg]

YouTube Link: https://www.youtube.com/watch?v=Y1TmesiVtGg [Watch the Video In Full Screen.]

Output
node readline.js
No of years you’ve been working in corporate? 3
You’re short of 2 years experience to attend job interview at Apple Inc!

node readline.js
No of years you’ve been working in corporate? 9
Excellent, you’re eligible for the job interview!!

Note:
readline module is built into node.js because this is used most often in node applications.
User input is a crucial thing in any sophisticated application.