Create user Form in HTML


Creating a form

Form is the way to collect information from user by giving inputs.
Form may contain text boxes, clickable buttons , multiple choice check boxes, pull down menues & image maps.
A web page can have more than one form & other body content can also be put on same page.

<form> tag

To insert a form in web page <form> & </form> tags are used.
This tag have following attributes:
Attributes DescriptionValues
action : Gives the URL of the application that is to receive & process the forms data. URL
method : Sets the method by which browser sends the forms data to the server for processing.Value for this attribute can be
get :Web browser submits the form.
post:The web browser sends the forms data separately from the URL as a stream of bits.
get or post
target : Where to open the result form to another window or frame. _blank, _self, _parent, _top, framename

<input> tag

The <input> tag is used for managing the inputs from the user.
It provides following attributes:
Attributes DescriptionValues
align : Sets the the alignment of an image input.left, right, top, middle, bottom
alt : Sets the an alternate text for an image input.text
checked : Used for an input element to be preselected when the page loads (for type="checkbox" or type="radio")checked
disabled : Used for an input element to be disabled when the page loads.disabled
size : Sets the width of the input control in pixels.number
maxlength : Sets the maximum numbers of input characters allowed in input control.number
readonly : Used when an input field should be read-only (for type="text" or type="password")readonly
src : The location of the image that can be used for graphical buttons.URL
name : It is used to give name for each name field. Name can be in string & symbols & underscore(_) can also be used herewith.name
type : Here you can select type of input field. button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
value : Defines the value of the option to be sent to the server.text

<textarea> tag

This tag creates text multi-line input area in a form.
Attributes:
AttributesDescriptionValues
name : Sets label for text input area.name_of_textarea
rows : Set the number of lines to be in the textarea.number
cols : Sets number of characters to be inserted in horizontal line.number
disabled : Sets a text-area to be disabled.disabled
readonly : Sets a text-area to be readonly.readonly

<label> tag
This tag defines a label for an input element. It toggles the control.
Attributes:
AttributesDescriptionValues
for : Sets which form element a label should bound with.element_id

<select> tag

This tag is use for creating drop-down menu or text list menu, depending upon the attribute selection. <option> tag inside an <select> element defines a list items.
Attributes of this tag are:
Attributes DescriptionValues
disabled : It disables the drop-down list.disabled
multiple : It specifies that multiple items can be selected at a time.multiple
name : Defines a unique name for the drop-down list.unique_name
size : Defines the number of visible items in the drop-down list.number

<optgroup> tag

<optgroup> tag is used to keep together related list-items. It is specially used when you have large number of option in a list.
Attributes:
Attributes DescriptionValues
label : Sets description of list items.text
disabled : Specifies that the option group should be disabled when it first loads.disabled

<option> tag

This tag is written just after the <select> tag for creating individual list item within the menu.
Attributes of <option> tag are:
Attributes DescriptionValues
disabled : Specifies that the option should be disabled when it first loads.disabled
label : Defines a label to use when using .text
selected : Specifies that the option should appear selected (will be displayed first in the list).selected
value : Defines the value of the option to be sent to the server.text

<button> tag

<button> tag is used to create button in the form.

This tag have following attributes:
Attributes DescriptionValues
disabled : Specifies that the buuton should be disabled when it first loads.disabled
name : Specifies the name for a button.text
type : Specifies the name for a button.button, reset, submit
value : Specifies the text that goes on button.text

Now let's see the eg. showcasing usage of above tags:
<form>
First name:<input type="text" name="firstname">
Last name:<input type="text" name="lastname">
Password:<input type="password" name="lastname">
More about you: <textarea rows="3" cols="25">This is default text.</textarea>
Select your gender: <input type="radio" name="gender" value="male"><label for="male">Male</label><input type="radio" name="gender" value="female"> <label for="female">Female</label>
Select sports you like:
<input type="checkbox" name="sport" value="Tennis">
<input type="checkbox" name="sport" value="Cricket">
<input type="checkbox" name="sport" value="Football">
Select from the list:
<select>
<option>Tea</option>
<option>Coffee</option>
<option>Soft drink</option>
<option>None</option>
</select>
<input type="reset" value="Reset"> <input type="submit" value="Submit">
</form>
Output:
First name:

Last name :

Password :

More about you:

Select your gender:
Select sports you like:
Tennis
Cricket
Football
Select from the list:



You Might Also Like

0 comments

My photo
Hi. I am Ramesh Wetkoli. Three things I try to include in my blog posts are creativity, useful insights, and trendy information. IT graduate and working professional. I have leveraged 9+ years of work experience in IT industry and learnt various technologies, providing merchandizing support and handling digital marketing responsibilities.

Find us on Facebook