info@tutsfinder.in



HTML Forms



An HTML form is used when you want to collect the input from users.

The user input then sent to a server for processing.


Let us take an simple example to understand the use of HTML forms:

During user registration you would like to collect information such as name, email address, password etc.


When the registration is completed entering the required fields the data is posted to a back end application such as CGI, ASP script, PHP Script etc. The back end application will perform required processing on the passed data based on defined business logic inside the application.


Syntax for HTML form:
<form action = “Script URL” method = “GET|POST”>
Form elements like radio button, input etc.
</form>


Example:
<!DOCTYPE html>
<html>
<head>
<body>
<h1>HTML Forms</h1>

<form action="/action_page.php">
<label for="fname"> First name: </label>
<br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>


Output:

Form

Form Attributes


Some attributes of form:

1. action – backend script ready to process your passed data.

2. Method – method to be used to upload data, most commonly method that are used GET and POST.

3. Target – specify the target window or frame where the result of the script will be displayed.

4. enctype – this attribute is used to specify how the browser encodes the data before it sends it to the browser.


HTML Form Controls

• Text Input Controls

There are three types of text input controls used in forms:

1. Single line text input controls- this control is used for items that require only one line of user input such as names, they are created using HTML <input> tag.



Example:
<!DOCTYPE html>
<html>
<head>
<title> Text input control </title>
<head>
<body>
<form>
First name: <input type = “text” name = “first_name” />
<br><br>
Last name: <input type = “text” name = “last_name” />
</form>
</body>
</html>


Output:

Form

Attributes of input tag:


Form

2. Password input Controls

This control is used to secure ur text, which makes the text itno characters as soon as user enter it, they are also created using <input> tag but type attribute is set to password.



Example:
<!DOCTYPE html>
<html>
<head>
<title> Password Input control </title>
<head>
<body>
<form>
User Id : <input type = “text” name = “user_id”/>
<br><br>
Password <input type = “password” name = "password">
</form>
</body>
</html>


Output:

Form

Attributes of password tag:


Form

3. Multiple-line text input Controls

This control is used when user is required to give the details in more than a single sentence. It is created using <textarea> tag.



Example:
<!DOCTYPE html>
<html>

<body>
Description:
<br>
<textarea rows="4" cols="50" name="description">
Describe here..
</textarea>
</body>
</html>


Output:

Form

Attributes of textarea tag:

Form

4. Checkbox Control

This control is used when more than one option is required to be selected.

They are created using <input> tag but type attribute is set to checkbox.



Example:
<!DOCTYPE html>
<html>
<head>
<title> Checkbox Control </title>
<head>
<body>
<form>
<input type = "checkbox" name = "English" value = "on"> English
<input type = "checkbox" name = "Business Studies" value = "on"> Business Studies
</form>
</form>
</body>
</html>


Output:

Form

Attributes of Checkbox control:

Form

5. Radio Button Control

Radio buttons are used when user wants to select only one option out of many options.

They are also created using tag and type attribute is set to radio.



Example:
<!DOCTYPE html>
<html>
<head>
<title> Radiobox Control </title>
<head>
<body>
<form>
<input type = "radio" name = "subject" value = "English"> English
<input type = "radio" name = "Subject" value = "Business Studies"> Business Studies
</form>
</form>
</body>
</html>


Output:

Form

Attributes of Radio box Control:

Form

6. Select Box Control

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



Example:
<!DOCTYPE html>
<html>
<head>
<title> Select Box Control </title>
<head>
<body>
<form>
<select name = “dropdown”>
<option value = “Engineer” selected> Engineer </option>
<option value = “Doctor” selected> Doctor </option>
</select>
</form>
</body>
</html>


Output:

Form

Attributes of Select and option Tag:

Form

7. Button Controls

These are use to create clickable buttons, also be created using <input> tag by setting type attribute to button.



Example:
<!DOCTYPE html>
<html>
<head>
<title> Button Control </title>
<head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit"  />
<input type = "reset" name = "reset" value = "Reset" //>
</form>
</body>
</html>


Output:

Form

Attribute of Button Control:

Form

8. File Upload Box

It is used when you want to allow a user to upload a file to your web site.

This is also created using <input> tag and setting the type attribute to file.



Example:
<!DOCTYPE html>
<html>
<head>
<title> Upload Box </title>
<head>
<body>
<form>
<input type = "file" name = "fileupload" accept = “"image/*" /<
</form>
</body>
</html>


Output:

Form

Attributes of file upload box:

Form