Web Technologies

HTML Forms

SMT.M.Jeevana Sujitha

Assistant Professor

​

Department of Computer Science and Engineering

SRKR Engineering College, Bhimavaram, A.P. - 534204

OBJECTIVES

The Objectives of this lecture are

• To learn about Html Forms.

HTML Forms

• Form is a typical layout on the webpage by which user can interact with the webpage.
• Forms are required when we want to collect some data from the user.
• A form will take input from the user and then will pass it to the backend application such as jsp, php and servlet.

• The backend application

will perform

required processing on the passed data based on defined business logic inside the application.

HTML Forms

Creating Forms

• The html <form> tag is used to create an html form and it has the following syntax.
• Syntax:

<form action=“script url” method=“get/post”> Form elements are placed here

</form>

HTML Forms

Text input controls:

• There are three types of text input used on forms.
• Single line text input controls
• Password input control
• Multiline text input control

HTML Forms

Single line text input control:

• This control is used for items that require only

one line of user input such as search boxes and names.

• They are created using <input> tag. Attributes of <input> tag:
• type-indicates type of input control
• name-used to give name to the control
• value-provide initial value inside the control
• size-specifies width of text in terms of char
• maxlength-specifies max number of charecters

Password input control:

HTML Forms

• This is also a single line text input but it masks the characters as soon as a user enters it.
• They are also created by using <input> tag. Syntax:

<input type=“password” attribute list>

• Where the type attribute indicates the type of input control and for password i/p control it will be set to “password”

Multiline text input control:

HTML Forms

• This is used when the user is required to give details that may be longer than a single sentence.
• They are created by using <textarea> tag. Example:

<textarea rows=“5” cols=“50” name=“address”>

Enter your address here

</textarea>

Checkbox control:

• Checkboxes are used when more than one option is required to be selected.
• They are also created by using <input> tag but type=“checkbox”

Example:

HTML Forms

value=“c”checked>c <br>

<input type=“checkbox”

<input type=“checkbox” name=“subject”

name=“subject”

value=“cpp”>cpp <br>

Radio Button control:

HTML Forms

• These are used when out of many options, just one option is need to be selected.
• They are also created by using <input> tag but type=“radio”

Example:

<input type=“radio”

name=“gender”

value=“male "checked>male <br>

<input type=“radio” name=“gender” value=“female”>female<br>

HTML Forms

Select box control:

• It is also called a drop down box, which

provides option to list down various options in the form of drop down list, from where user can select one or more options .

• They are also created by using <select> tag Example:

<select name="branch“ multiple=“multiple”>

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

<option value="eee">eee</option>

</select>

HTML Forms

Button controls:

• We can create a clickable button using <input> tag by selecting its type attribute to button.
• The type attribute can take the following values.

submit: used to submit a form

reset: resets the form controls to their initial values

button: used to trigger a client side script image: creates a clickable image button

THANK YOU