Skip to main content

Html forms, all elements and all attributes

In HTML a form can be made using form tag. It is a container tag.
Inside the form tag there are many input tags like email, text, password, phone, select, textarea etc.

Form example




HTML
<body>
 <form>   •••   </form>
</body>
We use action attribute to point to a webpage that will load when the user clicks submit button.
HTML
<form action="query.php">   •••   </form>
When use GET the form data will be visible in page address.
HTML
<form action="url" method="get"></form>
Use POST if the form is updating data or includes like password.
HTML
<form action="url" method="POST"></form>
Remember: Default value of method attribute is get , hence the form value will be visible in address bar.

Input tag

The input element creates an input box in the form. There are many types of input boxes.
HTML
<form>
 <input type="text">
 <input type="password">
</form>
Other possible values for type attribute are color, date, search, week, datetime, month, tel, datetime-local, number, time, email, range and url.

Examples

Input type number
HTML
<input type="number"/>
Input type email
HTML
<input type="email"/>
Input type Tel
HTML
<input type="tel"/>
Input type color
HTML
<input type="color"/>
Input type range
HTML
<input type="range"/>
Input type time
HTML
<input type="time"/>
Input type date
HTML
<input type="date"/>
Input type Select
HTML
<select>
  <option value="apple">Apple</option>
  <option value="samsung">Samsung</option>
  <option value="nokia">Nokia</option>
  <option value="verizon">Verizon</option>
</select>
Input type Radio
HTML
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
 Male
 Female
 Other
Input type CheckBox
HTML
<input type="checkbox" name="medium" value="facebook" checked> Share on facebook<br>
<input type="checkbox" name="medium" value="twitter"> Tweet on twitter<br>
 Share on facebook
 Tweet on twitter
Input type Submit
HTML
<input type="submit" name="submit" value="Send">
Input type Reset
Clears entire form (all inputs)
HTML
<input type="reset" name="reset" value="Clear">

Name attribute

The name attribute specifies name for form and inputs such that they can be accessed by backend program.
For advanced forms visit here
HTML
<form>
 <input type="text" name="username"/>
 <input type="password" name="password"/>
</form>

Required Attribute

This attrubute tells the browser to not submit the form unless the input is filled or a checkbox or radio is filled.
HTML
<input type="number" required/>

Fieldset

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
HTML
<form action="action.php">
  <fieldset>
    <legend>User Information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="John"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
User Information:First name:

Last name:


Comments

Post a Comment

Popular posts from this blog

CSS animations , flying rocket and rotating cube.

Learning CSS ANIMATIONS CSS animations are great and always been attractive for everyone. Today here I am gonna teach you the animation in which a font-awesome rocket is flying between the clouds and also a 3D rotating cube with perspective. The rocket animation is 2D and made with the help of font-awesome and css transform property. You can download the source file of flying rocket by Here  . For the full tutorial Go to  Rocket animation css tutorial  . Download the source file of rotating cube by  Here  . For full tutorial go to  to this link  .
Post a Comment
Read more

Basic CSS , Introduction to properties

CSS is a stylesheet language which runs in users browser to give a rich and decorative user-experience.Currently the latest version available of CSS is 3 and CSS4 is going to arrive with many new features. CSS3 brought many new features like Animations , transforms etc. Today here we are gonna cover all the basic properties used in CSS , which you are gonna use most of the time. The colors supported in CSS can be written in the form of hsba() or hsb() or rgb() or rgba() or hexadecimal or in color names. Color Opacity Background Border Box-shadow Height and Width Position Margins and paddings Display Text-Align Font Properties : Color The color property sets color of the text inside the selector. CSS p { color : red ; } //produces Hello world! CSS p { color : rgb ( 38 , 98 , 67 ) ; } //produces Hello world! Opacity The color property sets opacity of any selected element. It varies from 0 (invisbile) to 1(fully visbile) CSS p {...
Post a Comment
Read more

STORAGE API - Web development Tutorials

The HTML5 brought a lots of amazing technologies in the web . It also brought API called  Storage API . This api is used to set and retrieve data stored on user's device. This is better than  cookies . 1. Apart from being an old way of saving data, Cookies give you a limit of 4096 bytes (4095, actually) - its per cookie. Local Storage is as big as 5MB per domain. 2.  localStorage  is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry. As you may have thought this property can be accessed using  window  object. This api has two properties namely  sessionStorage and  localStorage .(Remember we use camelcase in the name). As you may have assumed the  localStorage  property stores data on user's device until it is deleted by the user (clearing cache) or by the script itself , w...
Post a Comment
Read more