saftutorials.com
HTML Form Attributes Tutorial

HTML Form Input Attributes important for HTML Form tag. HTML input attributes make easy HTML form development. Before learn this tutorials you can learn our HTML Form Tutorials.

How to use HTML form Input Attributes?

If you learn HTML form Input type like <form></form> then add an INPUT element then you can add attributes with this input type like <form><input type="text" name="" id=""></form>

HTML Form Input Attributes

List of HTML form input attributes:

1) type - use for Type of form input.

2) name - use for Name of form input.

3) id - use for Identification of form input.

4) value - use for Value of form input.

5) disabled - use for disabled of form input.

6) size - use for size of form input.

7) min - use for minimum input character.

8) max - use for maximum input character.

9) autocomplete - use for autocomplete on or off input character.

10) style - use for inline css code in input element.

11) spellcheck - use for spellcheck on input element.

12) height - use for height on input element.

13) width  - use for width on input element.

14) title - use for mouse hover text title.

15) required - use for mark required on input element.

16) readonly - use for mark read only mode on input element.

17) checked - use for checked on input type checkbox or radio button.

18) class - use for call CSS class declaration.


Examples:


HTML Form Input with Name and ID Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Name and ID Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" id="">
</form>
</body>
</html>

Double Click to Select Code

Name:  

HTML Form Input with Value Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Value Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" id="" value="Default Value">
</form>
</body>
</html>

Name:  

HTML Form Input with Disabled Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Disabled Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" id="" disabled="">
</form>
</body>
</html>

Name:  disable input element

HTML Form Input with Size Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Size Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" id="" size="6">
</form>
</body>
</html>

Name:  Size of 6

HTML Form Input with Min and Max Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Min and Max Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" id="" min="3" max="10" >
</form>
</body>
</html>

Double Click to Select Code

Name:  

HTML Form Input with Style Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Style Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" style="background: red;">
</form>
</body>
</html>

Name:  background red with style attribute

HTML Form Input with Title Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Title Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name=""  title="Mouse Hover Title Text" >
</form>
</body>
</html>

Name:  Mouse hover title text

HTML Form Input with Required Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Required Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" required="" >
</form>
</body>
</html>

Name:  

HTML Form Input with Readonly Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Readonly Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="text" name="" readonly="" value="123456">
</form>
</body>
</html>

Name:  No change value

HTML Form Input with Checked Attribute
<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Input with Checked Attribute Tutorials</title>
</head>
<body>
<form name="form1" method="post">
  Name: <input type="checkbox" checked="" name="" readonly=""  >
</form>
</body>
</html>

Checkbox checked:  | Radio button checked:  

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic