New Form Attributes Of HTML5

Now it is more easier to handle form in HTML5. Newly release HTML5 introduced some important new Form input attributes, input types and other elements for web development. Form is very important in web applications. All most every blog and websites use form to search query and contact. So Validation of the Form is the prior topic.

New attributes for <form> element are:

novalidate – not to check validation when submit.
<form action="#" novalidate>

form:

<form action="#" id="formID">
  First name: <input type="text" name="firstname" autofocus><br>
  Last name:  <input type="text" name="lastname"><br>
  <input type="submit">
</form>

formaction: ( This form attribute overwrite the form action )

<form action="http://domain.com/search" id="formID">
      Name: <input type="text" name="Fullname" autofocus><br>
      Email: <input type="email" name="email"><br>
      <input type="submit" formaction="http://domain.com/overwrited url">
</form>

formenctype: ( Encoded all characters before send)

<form action="#" enctype="text/plain">
     Name: <input type="text" name="Fullname" autofocus><br>
     Email: <input type="email" name="email"><br>
     <input type="submit" formenctype="application/x-www-form-urlencoded">
</form>

formmethod: (In this case overwrite method get to post)

<form action="http://domain.com/login" method="get">
     Name: <input type="text" name="Fullname" autofocus><br>
     Email: <input type="email" name="email"><br>
      <input type="submit" formmethod="post">
</form>

formnovalidate: (Form won’t check any validation)

<form action="#">
     Name: <input type="text" name="Fullname" autofocus><br>
     Email: <input type="email" name="email"><br>
     Password: <input type="password" name="password"><br>
     <input type="submit" formnovalidate>
</form>

formtarget:

<form action="#">
     Name: <input type="text" name="Fullname" autofocus><br>
     Email: <input type="email" name="email"><br>
     <input type="submit" formtarget="_blank">
</form>

New attributes for <input> element are:

autocomplete – set for autocomplete on or off

Email: <input type="email" name="email" autocomplete="on">

placeholder:

<input type="email" name="Email" placeholder="Email Address<br />

pattern: (Check input Charecters and Condition)

<input type="text" name="City" pattern="[A-Za-z]{3}" title="Three letter only">

step: ( multiple input field value with step)

<form action="/formActionPage.php">
  <input type="number" name="fieldname " step="3">
  <input type="submit">
</form>

required:

<input type="text" name="username" required autofocus >
<input type="email" name="email" required>

list:

<input list="countries">
<datalist id=" countries ">
  <option value="Country One">
  <option value=" Country Two">
  <option value=" Country Three">
  <option value=" Country Four">
  <option value=" Country Five">
</datalist>

multiple: (Can be select multiple field value)

<form action="#">
     Name: <input type="text" name="name" autofocus><br>
     Email: <input type="email" name="email" size="25" multiple><br>
     <input type="submit">
</form>

image: (It is used to create graphical submit buttons)

<input type="image" src="image.jpg" alt="title" >

height and width: (Define the input field Height and Width)

<form action="#" enctype="text/plain">
     <input type="image" src="image.jpg" alt="title" width="250" height="300"><br />
     <input type="submit">
</form>

min and max: (maximum and minimum number for input field)

<input type="number" name="qty " min="1" max="50">

 

 

 

author Author: Robert Calixto

comments Commenting and subscribing are very important to us because they motivate us to keep producing content of the highest caliber that appeals to your needs and interests.