Scribd
Upload
72 views

HTML Form, Font, All Tag List

The document discusses HTML forms and form elements. It provides examples of common form elements like text fields, password fields, radio buttons, checkboxes, textareas, submit buttons, and how to group related elements using fieldsets. It also discusses form tags like <form>, <input>, <label>, <textarea>, <select>, <option>, and <button>.

Uploaded by

SWABHIMAN SINGH PARIDA
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
72 views

HTML Form, Font, All Tag List

The document discusses HTML forms and form elements. It provides examples of common form elements like text fields, password fields, radio buttons, checkboxes, textareas, submit buttons, and how to group related elements using fieldsets. It also discusses form tags like <form>, <input>, <label>, <textarea>, <select>, <option>, and <button>.

Uploaded by

SWABHIMAN SINGH PARIDA
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

HTML Form

An HTML form is a section of a document which contains controls such as text fields,


password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent to
the given address.

HTML Form Syntax


1. <form action="server url" method="get|post">  
2.   //input controls e.g. textfield, textarea, radiobutton, button  
3. </form>  

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.


<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML <form> element


The HTML <form> element provide a document section to take input from user. It
provides various interactive controls for submitting information to web server such as
text field, text area, password field, etc.

Note: The <form> element does not itself create a form but it is container to contain all
required form elements, such as <input>, <label>, etc.

Syntax:

1. <form>  
2. //Form elements  
3. </form>  

HTML <input> element


The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.

Example:
1. <body>  
2.   <form>  
3.      Enter your name  <br>  
4.     <input type="text" name="username">  
5.   </form>  
6. </body>  
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.

1. <form>  
2.     First Name: <input type="text" name="firstname"/> <br/>  
3.     Last Name:  <input type="text" name="lastname"/> <br/>  
4.  </form>  

Note: If you will omit 'name' attribute then the text filed input will not be submitted to
server.

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <title>Form in HTML</title>  
5. </head>  
6. <body>  
7.   <form>  
8.         Enter your address:<br>  
9.       <textarea rows="2" cols="20"></textarea>  
10.   </form>  
11. </body>  
12. </html>  

Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user
friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have
for attribute in label tag that must be same as id attribute of input tag.
NOTE: It is good to use <label> tag with form, although it is optional but if you will use it,
then it will provide a focus when you tap or click on label tag. It is more worthy with
touchscreens.
1. <form>  
2.     <label for="firstname">First Name: </label> <br/>  
3.               <input type="text" id="firstname" name="firstname"/> <br/>  
4.    <label for="lastname">Last Name: </label>  
5.               <input type="text" id="lastname" name="lastname"/> <br/>  
6.  </form>  

HTML Password Field Control


The password is not visible to the user in password field control.

1. <form>  
2.     <label for="password">Password: </label>  
3.               <input type="password" id="password" name="password"/> <br/>  
4. </form>  

HTML Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.

1. <form>  
2.     <label for="email">Email: </label>  
3.               <input type="email" id="email" name="email"/> <br/>  
4. </form>  

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control


The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a
time.

Using radio buttons for multiple options, you can only choose a single option at a time.
1. <form>  
2.     <label for="gender">Gender: </label>  
3.               <input type="radio" id="gender" name="gender" value="male"/>Male  
4.               <input type="radio" id="gender" name="gender" value="female"/>Female 
<br/>  
5. </form>  

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>  
2. Hobby:<br>  
3.               <input type="checkbox" id="cricket" name="cricket" value="cricket"/>  
4.                  <label for="cricket">Cricket</label> <br>  
5.               <input type="checkbox" id="football" name="football" value="football"/>  
6.                  <label for="football">Football</label> <br>  
7.               <input type="checkbox" id="hockey" name="hockey" value="hockey"/>  
8.                  <label for="hockey">Hockey</label>  
9. </form>  

Note: These are similar to radio button except it can choose multiple options at a time
and radio button can select one button at a time, and its display.

Output:

Submit button control


HTML <input type="submit"> are used to add a submit button on web page. When
user clicks on submit button, then form get submit to the server.

Syntax:

1. <input type="submit" value="submit">  

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.


Example:

1. <form>  
2.     <label for="name">Enter name</label><br>  
3.     <input type="text" id="name" name="name"><br>  
4.     <label for="pass">Enter Password</label><br>  
5.     <input type="Password" id="pass" name="pass"><br>  
6.     <input type="submit" value="submit">  
7. </form>  

Output:

HTML <fieldset> element:


The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:

1.  <form>  
2.      <fieldset>  
3.       <legend>User Information:</legend>  
4.     <label for="name">Enter name</label><br>  
5. <input type="text" id="name" name="name"><br>  
6. <label for="pass">Enter Password</label><br>  
7. <input type="Password" id="pass" name="pass"><br>  
8. <input type="submit" value="submit">  
9. </fieldset>  
10. </form>  

HTML Form Example


Following is the example for a simple form of registration.

1. <!DOCTYPE html>  
2.  <html>  
3.  <head>  
4.   <title>Form in HTML</title>  
5. </head>  
6.  <body>  
7.      <h2>Registration form</h2>  
8.     <form>  
9.      <fieldset>  
10.         <legend>User personal information</legend>  
11.         <label>Enter your full name</label><br>  
12.         <input type="text" name="name"><br>  
13.          <label>Enter your email</label><br>  
14.          <input type="email" name="email"><br>  
15.          <label>Enter your password</label><br>  
16.          <input type="password" name="pass"><br>  
17.          <label>confirm your password</label><br>  
18.          <input type="password" name="pass"><br>  
19.          <br><label>Enter your gender</label><br>  
20.          <input type="radio" id="gender" name="gender" value="male"/>Male  <br>  
21.          <input type="radio" id="gender" name="gender" value="female"/>Female 
<br/>    
22.          <input type="radio" id="gender" name="gender" value="others"/>others 
<br/>   
23.           <br>Enter your Address:<br>  
24.          <textarea></textarea><br>  
25.          <input type="submit" value="sign-up">  
26.      </fieldset>  
27.   </form>  
28.  </body>  
29. </html>  

HTML Form Example


Let's see a simple example of creating HTML form.

1. <form action="#">  
2. <table>  
3. <tr>  
4.     <td class="tdLabel"><label for="register_name" class="label">Enter name:</
label></td>  
5.     <td><input type="text" name="name" value="" id="register_name" style="width:1
60px"/></td>  
6. </tr>  
7. <tr>  
8.     <td class="tdLabel"><label for="register_password" class="label">Enter password:
</label></td>  
9.     <td><input type="password" name="password" id="register_password" style="widt
h:160px"/></td>  
10. </tr>  
11. <tr>  
12.     <td class="tdLabel"><label for="register_email" class="label">Enter Email:</
label></td>  
13.     <td  
14. ><input type="email" name="email" value="" id="register_email" style="width:160px"
/></td>  
15. </tr>  
16. <tr>  
17.     <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</
label></td>  
18.     <td>  
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>  
20. <label for="register_gendermale">male</label>  
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>  
22. <label for="register_genderfemale">female</label>  
23.     </td>  
24. </tr>  
25. <tr>  
26.     <td class="tdLabel"><label for="register_country" class="label">Select Country:</
label></td>  
27.     <td><select name="country" id="register_country" style="width:160px">  
28.     <option value="india">india</option>  
29.     <option value="pakistan">pakistan</option>  
30.     <option value="africa">africa</option>  
31.     <option value="china">china</option>  
32.     <option value="other">other</option>  
33. </select>  
34. </td>  
35. </tr>  
36. <tr>  
37.     <td colspan="2"><div align="right"><input type="submit" id="register_0" value="
register"/>  
38. </div></td>  
39. </tr>  
40. </table>  
41. </form>  
]
HTML Form Input Types
In HTML <input type=" "> is an important element of HTML form. The "type" attribute of
input element can be various types, which defines information field. Such as <input
type="text" name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.

type=" " Description

text Defines a one-line text input field

passwor Defines a one-line password input field


d

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform a task on an
event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

Following is the description about types of <input> element with examples.

1. <input type="text">:
<input> element of type "text" are used to define a single-line input text field.

Example:
1. <form>  
2.     <label>Enter first name</label><br>  
3.     <input type="text" name="firstname"><br>  
4.     <label>Enter last name</label><br>  
5.     <input type="text" name="lastname"><br>  
6.     <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  
7. </form>  

2. <input type="password">:
The <input> element of type "password" allow a user to enter the password securely in
a webpage. The entered text in password filed converted into "*" or ".", so that it cannot
be read by another user.

Example:
1. <form>  
2.     <label>Enter User name</label><br>  
3.     <input type="text" name="firstname"><br>  
4.     <label>Enter Password</label><br>  
5.     <input type="Password" name="password"><br>  
6.     <br><input type="submit" value="submit">  
7. </form>  

3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit the form to the
server when the "click" event occurs.

Example:
1. <form action="">  
2.     <label>Enter User name</label><br>  
3.     <input type="text" name="firstname"><br>  
4.     <label>Enter Password</label><br>  
5.     <input type="Password" name="password"><br>  
6.     <br><input type="submit" value="submit">  
7. </form>  

After clicking on submit button, this will submit the form to server and will redirect the
page to action value.

4. <input type="reset">:
The <input> type "reset" is also defined as a button but when the user performs a click
event, it by default reset the all inputted values.
Example:
1. <form>  
2.     <label>User id: </label>  
3.      <input type="text" name="user-id" value="user">  
4.               <label>Password: </label>  
5.      <input type="password" name="pass" value="pass"><br><br>   
6.      <input type="submit" value="login">  
7.       <input type="reset" value="Reset">  
8. </form>  

Try to change the input values of user id and password, then when you click on reset, it
will reset input fields with default values.

5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing an option
between a set of related options. At a time only one radio button option can be selected
at a time.

Example:
1. <form>  
2.   <p>Kindly Select your favorite color</p>  
3.   <input type="radio" name="color" value="red"> Red <br>  
4.   <input type="radio" name="color" value="blue"> blue <br>  
5.   <input type="radio" name="color" value="green">green <br>  
6.   <input type="radio" name="color" value="pink">pink <br>  
7.   <input type="submit" value="submit">  
8. </form>  

6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be checked or
unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important difference
between both types: radio buttons allow the user to select only one option at a time,
whereas checkbox allows a user to select zero to multiple options at a time.

Example:
1. <form>   
2.       <label>Enter your Name:</label>  
3.       <input type="text" name="name">  
4.       <p>Kindly Select your favourite sports</p>  
5.       <input type="checkbox" name="sport1" value="cricket">Cricket<br>  
6.       <input type="checkbox" name="sport2" value="tennis">Tennis<br>  
7.       <input type="checkbox" name="sport3" value="football">Football<br>  
8.       <input type="checkbox" name="sport4" value="baseball">Baseball<br>  
9.       <input type="checkbox" name="sport5" value="badminton">Badminton<br><br
>  
10.       <input type="submit" value="submit">  
11.   </form>  

7. <input type="button">:
The <input> type "button" defines a simple push button, which can be programmed to
control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:
1. <form>  
2.      <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">  
3. </form>  

8. <input type="file">:
The <input> element with type "file" is used to select one or more files from user device
storage. Once you select the file, and after submission, this file can be uploaded to the
server with the help of JS code and file API.

Example:
1. <form>  
2.      <label>Select file to upload:</label>  
3.      <input type="file" name="newfile">  
4.      <input type="submit" value="submit">  
5. </form>  

9. <input type="image">:
The <input> type "image" is used to represent a submit button in the form of image.

Example:
1. <!DOCTYPE html>  
2. <html>  
3. <body>  
4. <h2>Input "image" type.</h2>  
5. <p>We can create an image as submit button</p>  
6.   <form>  
7.     <label>User id:</label><br>  
8.      <input type="text" name="name"><br><br>  
9.      <input type="image" alt="Submit" src="login.png"  width="100px">  
10.   </form>  
11.   
12.  </body>  
13. </html>  

HTML <font> tag


-----------------------------
HTML <font> tag is used to define the font style for the text contained within it. It
defines the font size, color, and face or the text in an HTML document.

Syntax
1. <font size=" " color=" " face=" "> Content....</font>  

Following are some specifications about the HTML <font> tag

Display Inline

Start tag/End tag Both Start and End tag

Usage Font Style

Example 1
1. <!DOCTYPE html>  
2.  <html>  
3.  <head>  
4.  <title>Font Tag</title>  
5.  </head>  
6.  <body>  
7.  <h2>Example of font tag</h2>  
8.  <p>This is normal text without any font styling</p>  
9.   <p>  
10.     <font color="blue">Text with normal size and default face</font>  
11.   </p>  
12.   <p>  
13.     <font size="5" color="green">Text with Increased size and default face</font>  
14.   </p>  
15.   <p>  
16.     <font color="red" face="cursive">Text with Changed face</font>  
17.   </p>  
18. </body>  
19. </html>  

Attribute
Tag-specific attribute

Attribut Value Description


e

colod rgb(X,X,X) It specifies the color of the content. (Not Supported in HTML5)
#xxxxx
color_name

face font_family It specifies the typeface of the content. (Not Supported in


HTML5)

size number It specifies the size of the content. (Not Supported in HTML5)
HTML Tags Ordered Alphabetically
Tag Description

<!--...--> Defines a comment

<!DOCTYPE>  Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation or an acronym

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym

<address> Defines contact information for the author/owner of a document

<applet> Not supported in HTML5. Use <embed> or <object> instead.


Defines an embedded applet

<area> Defines an area inside an image map

<article> Defines an article

<aside> Defines content aside from the page content


<audio> Defines embedded sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.


Specifies a default color, size, and font for all text in a document

<bdi> Isolates a part of text that might be formatted in a different


direction from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.


Defines big text

<blockquote> Defines a section that is quoted from another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button


<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column within a <colgroup>


element 

<colgroup> Specifies a group of one or more columns in a table for formatting

<data> Adds a machine-readable translation of a given content

<datalist> Specifies a list of pre-defined options for input controls

<dd> Defines a description/value of a term in a description list

<del> Defines text that has been deleted from a document


<details> Defines additional details that the user can view or hide

<dfn> Specifies a term that is going to be defined within the content

<dialog> Defines a dialog box or window

<dir> Not supported in HTML5. Use <ul> instead.


Defines a directory list

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text 

<embed> Defines a container for an external application

<fieldset> Groups related elements in a form

<figcaption> Defines a caption for a <figure> element


<figure> Specifies self-contained content

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text

<footer> Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Contains metadata/information for the document

<header> Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document


<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame

<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<li> Defines a list item

<link> Defines the relationship between a document and an external


resource (most used to link to style sheets)

<main> Specifies the main content of a document


<map> Defines an image map

<mark> Defines marked/highlighted text

<meta> Defines metadata about an HTML document

<meter> Defines a scalar measurement within a known range (a gauge)

<nav> Defines navigation links

<noframes> Not supported in HTML5.


Defines an alternate content for users that do not support frames

<noscript> Defines an alternate content for users that do not support client-
side scripts

<object> Defines a container for an external application

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list


<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<picture> Defines a container for multiple image resources

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby


annotations

<rt> Defines an explanation/pronunciation of characters (for East Asian


typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct


<samp> Defines sample output from a computer program

<script> Defines a client-side script

<section> Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source> Defines multiple media resources for media elements (<video> and
<audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text


<summary> Defines a visible heading for a <details> element

<sup> Defines superscripted text

<svg> Defines a container for SVG graphics

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<template> Defines a container for content that should be hidden when the
page loads

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table


<time> Defines a specific time (or datetime)

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements (<video> and <audio>)

<tt> Not supported in HTML5. Use CSS instead.


Defines teletype text

<u> Defines some text that is unarticulated and styled differently from
normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines embedded video content

<wbr> Defines a possible line-break

You might also like