Learn to create forms through html How to create registration form in html html registration form code html form design examples with code html form templates student registration form in html

Introduction to html5

FORMS IN HTML

 

Forms in html is used to accept users input.the form in html is created by using <form>

Element as <form></form>.

A form is a collection of different elements also called like textbox,radio button,checkbox,submit button and many more.

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. There are various form elements available like text fields, textarea fields, dropdown menus, radio buttons, checkboxes, etc. The HTMLtag is used to create an HTML form and it has following syntax

 

 

There are different types of form controls that you can use to collect data using HTML form:

 

 · Text Input Controls

 · Checkboxes Controls

 · Radio Box Controls

 · Select Box Controls

 · File Select boxes

 · Hidden Controls

 · Clickable Buttons

 · Submit and Reset Button

 

 

The <input> tag

 

The <input> tag is used to specify the different types of controls by using type attribute.

Syntax of using <input>tag is as follows:-

 

 

 

<input type=”text”> Creates a one line textbox.

 

<input type=”radio”> Creates a radio button. The radio button allows one option selection against multiple choice.

 

<input type=”checkbox”> Creates a checkbox. It allows more then one selection against multiple choice.

 

<input type=”submit”>  Displays a button for submitting the form data to a server.

 

 

<input type=”password”> The password input type is used to create  text content in the form of ’*’ asterik or ‘•’ disc.

 

<input type=”reset”> The reset controls clears the text content entered in the form.

 

<input type=”button”> It displays push button which activates on event.

 

 

Attributes of <input>: the following table specifies the description .about the controls of specific attribute.

 

Attributes	Description
Type	Indicates the type of input control and for password input control it will be set to password.
Name	Used to give a name to the control which is sent to the server to be recognized and get the value.
Value	This can be used to provide an initial value inside the control.
Size	Allows to specify the width of the text-input control in terms of characters.
Max length	Allows to specify the maximum number of characters a user can enter into the text box.
checked	it Set to checked if you want to select it by default.

 

<Textarea >tags: the  <textarea> is used to create a textbox with multiple lines . the number of lines and width of the textbox are specified by using  rows and cols attribute respectively.

The <textarea> can have following attributes.

 

·         Name: Used to give a name to the control which is sent to the server to be recognized and get the value.

·         Rows: Indicates the number of rows of text area box.

·         Cols: Indicates the number of columns of text area box

·         Max length: it specifies the maximum number of characters allowed in textarea .

·         Placeholder: it specifies a short hint that describes the expected value of a textarea .for example     placeholder=”your address”

·         Required : it specifies that textarea  must be filled out. i.e. it can not be blank.

 

 

Syntax:

<textarea name=”tal” rows=”5” cols=”30” placeholder =”your address” required></textarea>

 

 

<select>tag:

<select>tag is used .to create drop-down list.

 

The attribute of <select> tag are:

·         Name: assigns name to a control.

·         Multiple: it allow the user to select more then one value.

·         Size: the size attribute is used to specify  the number of visible values.

 

 

 

Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page has be displayed next based on the passed current page.

 

 

A simple form layout coding using html are as follows:

 

 

Input:

<!DOCTYPE html>

<html>

<head>

<title>Text Input Control</title>

</head>

<body bgcolor=white>

<form >

First name: <input type="text" name="first_name" />

<br><br>

Last name: <input type="text" name="last_name" />

<br><br>

User ID : <input type="text" name="user_id" />

<br><br>

Password: <input type="password" name="password" />

<br><br>

Description : <br>

<textarea rows="5" cols="50" name="description">

Enter description here...

</textarea><br>

<input type="checkbox" name="English" value="on"> English

<input type="checkbox" name="Marathi" value="on"> Marathi

<br><br>

<select name="dropdown"><br>

<option value="Maths" selected>Maths</option>

<option value="Physics">Physics</option>

</select><br><br>

<input type="submit" name="submit" value="Submit" />

<input type="reset" name="reset" value="Reset" />

<input type="button" name="ok" value="OK" />

<input type="image" name="imagebutton" src="/html/images/logo.png" />

</form>

</body>

</html>

 

 

 

Output: