Html Forms?

Html forms are important part of any website, without form you website is incomplete. If you collect any kind of information from the users you can collect it inform of name, email, country, phone number and visa card, etc. An Html form is made from one or more form elements. And those elements can be text input, textarea, select, email, buttons, radio button and checkbox button, etc. Some elements like Select and textarea are starting tags and closing tags (like <textarea></textarea>) and rest of the form elements are not closing tag (like <input>).

   Form elements here.

Form elements type:

A) <input> elements.

// use the for Name, Phone Number, Location etc
<input type=”text” /> 

Mostly used <input> elements in forms. This control is used for contain data in single line from users such as names, location information (city, address) pin-code. Input elements are also in divided in different types and it depends on the input type (<input type=””>) attribute.

B) Checkbox button input (for selecting one or more choice )

// Code here <input type=”checkbox” name=" accessories” value="laptop" checked />
<input type=”checkbox” name=" accessories” value=" macair " />

This is also a type of input element. This is used when the user choose one or more option.

C) Radio button input (for selecting one of limited numbers)

// Code here <input type=”radio” name="sex" value="male" checked/>
<input type=”radio” name="sex" value="female" checked/>

This is also a type of input element. This is used when we give one or more option to users, but users can select only one option.

D) <Select> list Element (Default dropdown)

// Code here
<select name="country">
<option value="America"> America </option>
<option value="UK"> UK </option>
<option value="India"> India </option>
<option value="Australia"> Australia </option>

By default, select list we also know this as a dropdown lists. It’s work like list (order and unorder list), same here select works like <ui> , <ol> and options work like <li>. User can select one value at a time.

E) Textarea (Multi-line)

//Code here

Multi line text area form element. Textarea value can be place between the opening tag and closing tags. Textarea have required two type attributes, rows and cols. Rows is used to define the number of viewable rows and it increase the height of the textarea. Cols is used to define the number of viewable column.

F) File Upload (Upload files)

//Code here
<input type=”upload” />

One more input type and its file upload, if you want user include one or more files into form submission. Then you can use input type upload in the form.

G) A submit, button and reset input (for submit and reset form)

<input type=”submit” value="login"/>
<input type=”Button” value="Add"/>
<input type=”Reset” value="Clear Field"/>

If we collect the user information from input field’s value then submit type is use for submit a form. On the other side reset type is used for reset form value form the form elements. And last button type is not submitting form – they don’t do anything by default.

Forms attribute

  • AttributeDescription
  • nameUnique Name of the control field
  • valueinitial value for an input field
  • sizeUse for input character size
  • maxlengthUse for input maximum number of characters
  • checked Checked attribute for radio and checkbox, it select field where we define it.
  • multipleMultiple use for given option to user select multi value.

Leave a Comment.