Sunday, 28 August 2016

HTML Input Type Text, Tel, URL, EMail, Password elements

02:35    No comments

Input Type text, tel, url, email, password are the form elements and input type allows this type to be available on Web Page.
Input Type Text
This allows a text box to appear on form. User information can be taken in this Text Box.
Attributes of Input Type Text 

  • Name- the name given to the text box allows the program that handles the information provided in the form to identify the text box.
  • Size- defines the number of visible characters that can be seen in the text box.
  • Maxlength- specifies the number of characters users can enter in the text box.
  • Value- specifies the default text that you want to display in the text box.
example:
 <!Doctype Html>

<html>
<body>
<h1>Input Type Text</h1>
<form>
Enter your three digit number: <Input type="text" name="codenumber"
size="3" maxlength="3" value="234">
</form>
</body>
</html>

Input Type Tel
It is used to enter the telephone numbers. It only allows numeric values. We can specify a particular pattern to enter the telephone number by using the pattern attribute of the input element.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type tel</h1>
<form>
Enter your Telephone Number: <Input type="tel" name="telnumber">
</form>
</body>
</html>

Input Type url
It is used to enter the valid path of a web page. A valid url consist of a protocol, a domain name, and a path name. the most widely used protocols are http(Hypertext transfer protocol), ftp(file transfer protocol). Url field is automaticaly validated when we submit the form.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type url</h1>
<form>
Enter your url: <Input type="url" name="urlname">
</form>
</body>
</html>

Input Type Email
It is used to enter valid email address, which should contain @ and a dot (.). The value of the email field is automatically validated when you submit the form. We can also add more than one email address in the email field by specifying the multiple attribute.
example

<!Doctype Html>
<html>
<body>
<h1>Input Type email</h1>
<form>
Enter your email: <Input type="email" name="emailname">
</form>
</body>
</html>

Input type Password
Password is used to protect the secret information, The text entered in the password field is not readable, as the asterisk sign or dot appears in the field.
Attributes of Input type Password 

  • Name- the name given to the field allows the program that handles the information provided in the form to identify the field.
  • Size- it defines the length of the password field by default it is 20.
  • Maxlength- specifies the number of characters users can enter in the password field.
  • Values- Specifies the value that is to be displayed by default in the password field. The value that is to be displayed in the password field is in the masked form, which means that the value is reflected as dots or asterisks.
example


<!Doctype Html>
<html>
<body>
<h1>Input Type password</h1>
<form>
Enter your four digit password: <Input type="password" name="codepassword"
size="5" maxlength="4" value="234">
</form>
</body>
</html>

0 comments:

Post a Comment