Html and CSS

Html Form, Form Tags, Form Attributes, Textbox, Buttons, Textarea

Html Form:

Html provides forms to get any kind of information from visitors. It is especially used to collect data from different users through website. Html form also provides an easy way for the visitors or users to communicate with the owner of the website. This is very useful if the website is used to advertise and sell products.

Html form provides a full range of GUI controls. The data is entered into the GUI controls. Similarly, some information/data is selected from GUI controls. The submitted can be processed by the programs such as CGI programs, ASP code etc stored into the website.

JavaScript allows the validation of data entered into html form at the client side. So only the valid data can be passed to the web server for further processing.


Amazon Purchase Links:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

Html Form Elements:

Html form consists of several types of elements (or objects) that are used to collect data (to enter and select data). Some important and commonly used html form elements are as follows:

  • Buttons
  • textboxes
  • text Area
  • Check Boxes
  • Radio buttons
  • List boxes etc.

Html form tag:

The <form> tag is used to design the layout of the html form in a webpage different html form elements are used within the <form> and </form> tags to get the information/data from users/visitors. For this purpose, different html form related are used within <form> and </form> tags. These tags include <input>, <select> <textarea> tags etc.

Html form tag Attributes:

The most important and commonly used attributes of <form> tag are as follows:

Name:

It is used to give the name of html form.

Method:

It is used to specify how html form data is sent to the web server (or html form processor). The possible values of this attribute are:

  • Get: the html form data is given to the web server in the html form of an environment of variable.
  • Post: the html form data is given to the web server as standard input to the program.

Action:

It is used to specify the name and locations of the html form processor such as name of ASP  or php file.

Input tag:

The <input> tag is used inside the <form> and </form> tags to create different types of input fields for input data (enter/select data)

Input tag Attributes:

The most important and commonly used attributes of <input> tag are as follows:

Type:

It is used to specify the type of input field. The possible values for this attribute are as follows:

  • Text: it is used to create
  • Password: it is used to create password field.
  • Radio: it is used to create radio button.
  • Chechbox: it is used to create checkbox button.
  • Submit: it is used to create a button that when clicked submits (sends) entered/selected data to the html form processor (or web server).
  • Reset: it is used to create a button that when clicked clears (or reset) the contents of all fields (or sets all inputs field to their default settings).
  • Image: this value replaces the submit button with an image.
  • File: it is used to create a file list box for uploading a file.
  • Hidden: it is used to create a hidden field.
  • Button: it is used to create a standard clickable button.

Name:

It is used to give the name to the input field. All data values entered/selected into the input fields are passed to the html form processor with the reference of input field names.

Size:

It is used to specify the width of the input field (in characters). It is only applied to the input field of type text or password.

SRC:

It is used to specify the graphic image for a submit button it is only applied if the input field type is “image”.

Maxlength:

It is used to specify the number of characters that can be entered in the field or password field.

Value:

It is used to set the default value for input field such as text field. It also refers to the contents of input field.

The value attribute is also used to give captions of submit, reset, and generic buttona.

ReadOnly:

It is used to set the input field as read only, so that user cannot modify the contents of the input field. It is especially used with input field of type text.

Disabled:

It is used to disable the input field, so that data cannot be accepted or submitted.

Checked:

It can used with radio button and check box to set the default state of these input fields to true.



Text Fields:

A text field is a one-line text input field. It is used to get input from user via keyboard. The text field are commonly used for entering names, phone number, e-mail addresses and so on.

The general syntax to add a text field to a html form is:

<form>

<input type=”text”>

</form>

The commonly used attributes used with input field of type text are; Name, size, value, maxlength, and readonly.

Example how to create A record Entry form in html using form tag:

<html>
    <head> <title>Record Entry Form</title>
    </head>
    <body>
    <h2 align = center> Record Entry Form</h2>
    <form>
    Enter Student Name   :<input type="text" name ="name" size="7"><br><br>
    Enter Father Name :<input type="text" name ="f_name" size="7"><br><br>
    Enter Address:<input type="text" name ="address" size="10"><br>
    </form>
    
    </body>
</html>

html form

Html form Password fields:

A password field is similar to text field except that the actual data is not appeared in this field. When the user enters data, asterisks (*) appears in this field instead of actual data. This type of input field is used to enter the password or pin code.

The attributes of password field are same as text field.

The general syntax to add a password field to a html form is;

<form>

<input type =”password”>

</form>

Example how to create a form in html using input fields, which take username and password:

<html>
    <head> <title>username and password Form</title>
    </head>
    <body>
    <h2 align = center> User's Name & Password Form</h2>
    <form>
    Enter UserName:<input type="text" name ="username" size="20"><br><br>
    Enter Password:<input type="password" name ="pass" size="20"><br><br>
    
    </form>
    
    </body>
</html>

html form

Html form Submit and reset Buttons:

The submit button is use to send (submit) the information entered into the html form field to the form processor. For this purpose, a html form requires two attributes “action” and “method” in the <form> tag. these attributes are used to specify what happens to the html form result and which program on the server will process them.

The general syntax to add a submit button to html form is;

<form>

<input type = “submit”>

</form>

The reset button is used to reset the html form. When the user enters data into different fields on the html form and then click reset button, all data into fields will be cleared. The other selections are also reset or set to their default values.

The general syntax to add a reset button to a html form is;

<form>

<input type = “reset”>

</form>


Example how to make html form in which there are submit and reset button:

<html>
    <head> <title>Record Entry Form</title>
    </head>
    <body>
    <h2 align = center> Submit and Reset Button in Form</h2>
    <form>
    Enter Student Name   :<input type="text" name ="name" size="7"><br><br>
    Enter Father Name :<input type="text" name ="f_name" size="7"><br><br>
    Enter Address:<input type="text" name ="address" size="10"><br><br>
    <input type="submit" name ="send" value= "Submit Data">
    <input type="reset" name ="clear" value= "Reset">
    </form>
    
    </body>
</html>

html form

Html form Creating Button:

You can also create a clickable generic button. It is usually used to process the html form data on client side. The most commonly used attributes of button are: name and value.

The general  syntax to create the generic button is:

<input type= “button” value =”click me”>

Example how to make buttons in html form:

<HTML>
<BODY>
<h2 align=center> Enter Student's marks</h2>
<form>
Student's Roll_No:<input type="text" name="roll_no" size="10"><br>
Operating System:<input type="text" name="os" size="10"><br>
DBMS:<input type="text" name="dbms" size="10"><br><br>
<input type="button" name="btn" value="compute">
</form>

</BODY>
</HTML>

html form

Html form Radio Buttons:

A radio button is a type of input field. Radio buttons are created to display a list of options. The user can choose one option from the given list of options.

The general syntax to create a radio button is:

<input type= “radio”>

The most important attributes of <input> tag that are used for radio button are

  • Value: it is used to set or return the value of radio button.
  • Checked: it is used to set the radio button as selected (or checked).

Example how to create radio buttons on form using html coding:

<HTML>
<BODY>

<form>
<table border= 2>
<tr>
<th> your Gender</th>
<th> your Favourite game</th>
</tr>
<tr>
<td>
<input type= "radio" name ="sex">Male<br>
<input type= "radio" name= "sex" checked>Female <br>
</th>
<td>
<input type ="radio" name= "game" checked>Hockey<br>
<input type ="radio" name="game">Cricked<br>
<input type= "radio" name ="game">Football<br>
</td>
</tr>
</table>

</form>

</BODY>
</HTML>

html form

Html form Checkboxes:

A checkbox is also a type of input field. Checkboxes are created to display a list of options. The user can choose more than one option  from the given list of options.

The general syntax to create a checkbox is:

<input type=”checkbox”>

The most important attributes of <input> tag that are used for checkbox are same as used for Radio button.


Example how to make form using html coding in which checkbox are used :

<HTML>
<BODY>

<form>
<table border=2>
<tr> 
<th>Your Class</th>
<th>Select Subject</th>
</tr>
<tr>
<td>
<input type="radio" value="pgd" name="class"> P.G.D<br>
<input type="radio" value="BCS" name="class">BCS<br>
<input type="radio" value="MCS" name="class" checked>MCS<br>
</td>
<td>
<input type="checkbox" value="Java" name= "subject">Java Programming<br>
<input type="checkbox" value="cpp" name= "subject" checked>C++ Programming<br>
<input type="checkbox" value="web" name= "subject">Web Programming<br>
<input type="checkbox" value="vb" name= "subject">Visual Basic Programming<br>
</td>
</form>

</BODY>
</HTML>

html form

Html form Hidden Fields:

Hidden fields are not visible on the html form of webpage. They are used to send the useful information to the html form processor (program on the web server that processes the html form input data). Usually hidden fields are used to send some special values from client-side that are not entered by the user. These values may include: computer name of the visitor, or some other exact values for documentation.

The general syntax to create a hidden field is:

<input type= “hidden”>

The most important and commonly used attributes of <input> tag for hidden field are: ‘name’ and ‘value’. the ‘value’ attribute is used to specify the special data/information that is to be sent to the html form processor. The html form processor receives the specified value with the reference of given ‘name’ of the hidden field e.g.

<input type=”hidden” name= “fieldname” value=”hidden text”>

Html form File Upload field:

Html also supports a special input field, called file upload field. This field is used to select a file from client computer (visitor’s computer) and send to the html form processor to store on the web server. All types of files can be uploaded on the web server using file upload fields.

The general syntax to create a file field is:

<input type =”file”>

The most commonly used attributes for file upload field are: name and value.

Example how to create uploading files form in html:

<HTML>
<BODY>

<form>
<h2> Select Files</h2>
<hr>
Select 1st file:<input type="file" name="file1"><br>
Select 2nd file:<input type="file" name="file2"><br>
Select 3rd file:<input type="file" name="file3"><br>
Select 4th file:<input type="file" name="file4"><br>
</form>

</form>

</BODY>
</HTML>

html form

Note that the textbox and ‘browse’ button are automatically included when <input> tag with “type = file” is used. When browse button is clicked, ‘choose file’ dialog box will appear to select the file. Select the file and click the ‘open’ button of dialog box. The selected file will appear in the textbox.

html form


Html form Creating Dropdown List Box:

Html also provides the feature for creating dropdown list box or selection list box. The visitor can select a value from predefined values.

<Select> tag of dropdown list:

the <Select> tag is used to create a selection list box or dropdown list box of selectable items. The items for the list are defined between the <select> and  </select> tags using <option> tag.

dropdown list attributes:

the most important and commonly used attributes of <select> tag are as follows:

Accesskey:

It is used to specify the access key as shortcut to open the selection list box. For example to specify the keyboard key ‘O’ as access key, html code is;

<select accesskey= “O”>

Name:

It is used to specify the name of the selection list box. The item selected from the list is sent to html form processor with the reference to this name.

Size:

It is used to set the size of the selection list box. It means that you can specify the number of visible items in the selection list box. By default its value is 1. If the specified size is less than the number of items in the list, a scrollbar appears to the right of list box.

For example to specify the size of list box as 5, html code is;

<select size=5>

Title:

This attribute is used to specify the text for tool tip.

Multiple:

It is used to specify that multiple items can be selected at the same time. the visitor can select multiple items by clicking with mouse and pressing ctrl key. The attribute is used along with size attribute.

 

<Option> tag:

this tag is used to add an item into the list. A separate <option> tag is used for each item of the list, so multiple <option> tags are used inside the <select> and </select> tags. The use of closing </option> tag is optional.

Attributes of <option> tag:

The most important and commonly used attributes of <option> tag are as follows:

Selected:

It is used to specify the default selection of a specified list item, which will appear as selected when a form is loaded reset.

For example, to specify the default selection of a city “new York” from the list of cities, html code is;

<option selected> New York

Value:

It indicates which data item is sent to the html form processor. If this attribute is omitted then the text that comes after the <option> tag is sent to the html form processor.



Example how to design html form in which there is a dropdown list boxes for selecting different information about a student:

<HTML>
<BODY>

<h3 align="center"> Selection Using dropdown ListBox</h3>
<form name= "info">
Select Your Gender:
<select name="gender">
<option selected>Male
<option>Female
</select>
<br>
Select Your Class:
<select name="class">
<option>MCS
<option>B.SC
<option selected>BCS
<option< MBA>
</select>
<br>
Select Your City:
<select name="city">
<option>New York
<option selected>Los Angeles
<option>Chicago
<option>Houston
</select>
<br> <br>
<input type="submit" name="data" value="Submit Data">
<br>
<input type= "reset" name="clear" value= "Reset Data">

</form>

</BODY>
</HTML>

html form

Html form Creating Multiple Lines Text Box:

In html, you can create multiple lines text box. It is known as text area. It is used to enter large amount of text such as comments, or suggestions.

<textarea> tag:

This tag is used to create a multiple lines textbox within a html form. To specify the default value in text area field, place the text between the <textarea> and </textarea> tags.

Text Area tag attributes:

The most important and commonly used attributes of <select> tag are as follows:

Name:

It is used to specify the name of text area. The text entered into the text area is passed to the html form with reference to this name.

Rows:

It is used to set the number of lines of the text area field. It means that the height  of text area (in terms of number of lines) is specified.

Cols:

It is used to specify the number of columns of the text area field. It means that the width of text area (in terms of number of characters per line) is specified.

Disabled:

It is used to disable the access to the text area field.

ReadOnly:

It is used to set the text area field read only. The visitor cannot modify/change the contents of read-only text area.

Title:

This attribute is used to specify the text for tool tip.


Example how make multiple lines comments section in html form:

<HTML>
<BODY>

<h2 align="center"> Comments Section</h2>
<form name= "info">
Select Your Gender:
<select name="gender">
<option selected>Male
<option>Female
</select>
<br>
Select Your Class:
<select name="class">
<option>MCS
<option>B.SC
<option selected>BCS
<option< MBA>
</select>
<br>
Your comments:
<br>
<textarea name="comments" cols= "50" rows="10">
</textarea> 
<br><br>
<input type="submit" name="data" value="Submit Data">

<input type= "reset" name="clear" value= "Reset Data">

</form>

</BODY>
</HTML>

html form

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button