How To Create Forms Using Html Programming

How To Create Forms Using HTML Programming

(By Subhro Mukherjee)

Hi Friends! my name is Subhro Mukherjee and welcome to my blog. here I provide you with Technology articles and in today’s blog we are going to learn how to create a form using HTML. if you don't know what is HTML, let me tell you HTML is Hypertext markup language which is used to design and to create webpages. it's quite simple to make a form using Html programming.

Now lets talk about the tags used in HTML forms:

The <form> tag

It is a container tag (a tag which needs opening and closing) in HTML programming. it includes various elements related with form.

the syntax of using this tag is :

<form>

body of the form that contain the form elements

</form>

The body of the form includes various form elements like text fields, radio buttons , check box, etc. This information is provided to serve different purposes of the user.

now, let's discuss various form elements available for different entries in a form.

The <input> Tag

One of the most important tag is the <input> tag. it allows to create a field for entering data of your choice. The data entry can be done under 'type' attribute of the <input> tag. The different components under 'type' are as follows:

Text: It provides input field to input text elements
Check Box: it is Used to Provide different Square Boxes where more than one options are to be selected by putting tick marks.
Radio: This attribute is use to select only one one of the given options by entering a dot in the circle.
Submit: It is used to create a button where you need to submit the form.
Password: It allows a field to enter a password to make your form personal.
Reset: This button provides to clear the data from the form and can be filled-in again with fresh information

Now, We have come across with different variations of the name field under the Type attribute

Let us discuss each variation keeping in the mind how they are going to be used practically:

Text

This variation <input> is used to provide a text line. the syntax of using Text is:

for example,

The <input text> further uses the following attributes:

Maxlength: to set maximum length of the input text
Size: It provides width of the input text
Value: used to enter initial value to the input text field.
Name: used to specify a name for the input text field.

I am providing a sample program for your practice;

<HTML>

<HEAD>

<TITLE>Sample Form</TITLE>

</HEAD>

<FORM>

<HR>Blood Donation Camp</H2>

<P ALIGN="CENTER"><B><I>Please Fill in The Form</I></B>

<P>Address:<INPUT TYPE="TEXT" SIZE="30"><BR>

<P>Blood Group:<INPUT TYPE="TEXT"><BR>

</FORM>

</BODY>

</HTML>

This program will create a web page just like this:

Radio

As I have already told you that the 'radio' button is used to select one ot of many options in the form. The syntax of creating a radio button under 'type' attribute is:

For example,

other attributes under this variation <INPUT TYPE> tag are:

Name: To provide name to the defined field
Value: Specifies the value for the radio button
Checked: To denote that the radio button is already checked or not.

I am providing a sample program for you to practice:

<HTML>

<HEAD>

<TITLE>Blood Donation</TITLE>

</HEAD>

<FORM>

<H2>Blood Donation Camp</H2>

<P ALIGN="CENTER"><B><I>Please Fill In The Form</I></B>

<P>Address:<INPUT TYPE="TEXT" SIZE="30"><BR>

<P>Blood Group:<INPUT TYPE="TEXT"><BR>

<P>Gender<BR>

<P><INPUT TYPE="RADIO" NAME="Gender" VALUE="Female">Female<BR>

</FORM>

</BODY>

</HTML>

This program will create a web page just like this;

Checkbox

The Checkbox is used to select a number of options in a given list of options on a form. Syntax of using Checkbox is : (Example)

It also has other variations like:

Name: Used to specify name of the checkbox field
Value: Provides value of the check box
Checked: Denotes that the checkbox is already checked or not.

I am giving a sample program for you to practise;

<HTML>

<HEAD>

<TITLE>Application for plus Two</TITLE>

</HEAD>

<FORM>

<H2>Application for plus two entrance 2020</H2>

<P ALIGN="CENTER"><B><I>Please Fill In The Form</I></B>

<P>Address:<INPUT TYPE="TEXT" SIZE="30"><BR>

<P>Name of the school:<INPUT TYPE="TEXT" SIZE="40"><BR>

<P>Gender<BR>

<P><INPUT TYPE="RADIO" NAME="Gender" VALUE="Female">Female<BR>

<P>Subjects Offered<BR>

<INPUT TYPE="CHECKBOX" NAME="Subjects" VALUE="English">English

<INPUT TYPE="CHECKBOX" NAME="Subjects" VALUE="Hindi">Hindi

<INPUT TYPE="CHECKBOX" NAME="Subjects" VALUE="Mathematics">Mathematics

<INPUT TYPE="CHECKBOX" NAME="Subjects" VALUE="Physics">Physics

<INPUT TYPE="CHECKBOX" NAME="Subjects" VALUE="Chemistry">Chemistry

<INPUT TYPE="CHECKBOX" NAME="Subjects" VALUE="Biology">Biology

</FORM>

</BODY>

</HTML>

The output of this program will be :

Password

The password field is used similar to the text field. The only difference is that the entered text is visualised in terms of symbols. This protects our password to be viewed by others. The syntax of password variation of type attribute is:

For Example,

Other modifications of this variation are:

Name: It provides name of the input field
Size: It specifies width of the field
Maxlength: It sets maximum length of the password field
Value: It Denotes the initial field value

(Sample program at the last)

Reset:

This button is created in to reset the form by clearing existing data from it. Once the reset button is clicked, the previous data gets deleted from the form and a blank form is provided to the user for the fresh entry of the data. The syntax of creating reset button in a form is:

For example,

Other attributes of this button are:

Name: It specifies name of the reset field
Value: It specifies the value(text) to be written on the reset button

I am providing a Sample program for your practice (password, submit, reset)

<HTML>

<HEAD>

<TITLE>FORMS</TITLE>

</HEAD>

<P ALIGN="CENTER"><B><I>Please Fill In The Form</I></B>

<P>Father"s Name:<INPUT TYPE="TEXT" SIZE="30">

<P>Degree:<INPUT TYPE="RADIO" NAME="Degree" VALUE="B.SC.">B.Sc.

<INPUT TYPE="RADIO" NAME="Degree" VALUE="M.Sc.">M.Sc.

<P>Password<INPUT TYPE="Password" SIZE="10">

</BODY>

</FORM>

</HTML>

The output of this program will be:

Search This Blog

Technology

How To Create Forms Using Html Programming

Comments

Post a Comment