Form Elements and Cheat Sheet of HTML

Form Elements of HTML

In a Web Development Technology (especially for the front-end devlopers), “HTML” are the basics or primary markup languages that we do uses to display the web page (the pages which we see on a websites). Sometime, in an HTML pages, along with the other contents display, we needs to take some user input as well as (especially in dynamics web site). And to takes the users of inputs in an HTML pages, we needs to uses multiples form elements to creates those form properly and with the help of those forms, we takes the user input in a corrects manner and puts those input (data) in our internals Database at the back-end of site.

Explains HTML Forms Element (including as syntax and example with output ๐Ÿ™‚

Since there is multiple HTML form element to creates a forms & gives the forms a proper looks in a structured ways; below is some of them explained one by one as.

SLNo.TagsMeanings/Descriptions
1.<form>To define a HTML form for user inputs
2.<input>To define input control
3.<datalist>To specify a list of pre-defined options
4.<fieldset>To define group related elements
5.<keygen>To define a secure input
6.<label>To define a label of input
7.<legend>To define a caption for fieldset
8.<textarea>To define a multiline input area

Syntax and Example

Some syntaxes and examples of HTML Form Elements with outputs are discussed below:

1.โ€œ<form>โ€ element

This element can contain many other elements as well including the below:

  • <input>
  • <output>
  • <label>
  • <select>
  • <button>
  • <option>
  • <textarea>

Example for a โ€œformโ€ element with input and submit button:

Syntax:

    <form action=”/test_page.php” method=”get”>

    Your Name: <input type=”text” name=”name”><br>

    <input type=”submit” value=”Submit”>

    </form>

Codes:

    <!DOCTYPE html>

    <html>

    <body>

    <form action=”/test_page.php”>

    Your name: <input type=”text” name=”Name”

    value=”Raju”><br>

    <input type=”submit” value=”Submit”>

    </form>

    </body>

    </html>

Output:ย 

2.โ€œ<input>โ€ element

This element is an inline element and belongs to the form-element group.

Syntax:

    <form action=”/test_page.php”>

    Input name: <input type=”text” name=”name”><br>

    Input age: <input type=”text” name=”age”><br>

    <input type=”submit” value=”Submit”>

    </form>

Codes:

    <!DOCTYPE html>

    <html>

    <body>

    <form action=”/action_page.php”>

    Input name: <input type=”text” name=”name” value=””><br>

    Input age: <input type=”text” name=”age” value=””><br>

    <input type=”submit” value=”Submit”>

    </form>

    </body>

    </html>

Output:ย 

Cheat Sheet of HTML

An HTML often called as Hypertext Markup Language are a standard markup languages used for developing web application and web page.An HTML were design and develop by W3C & WHATWG.An HTML first appeared in the year 1993’s which are 25 year ago. The latest versions are HTML 5.x .

Elements and Content on Cheat Sheet HTML

HTML element is the key component of HTML web page.An HTML element is mention in the forms of tag by using closed angular bracket around the elements name.An HTML can be included script such as JavaScript program insides it is content in the forms of embedding in it code. HTML element without any contents is called empty element. Every HTML elements contain a start tags and end tags.

ELEMENTDESCRIPTION

HTML ELEMENT

<p>This tag defines a paragraph.
<a href=โ€™linkโ€™>These are used to defines a hyperlink which link one web pages to another web pages.A href are the most importants attributes in a elements.
<div>These are used as a container tags that hide the implementation of other pages element.
<br/>This tags are used to breaks the lines which are called Line Break Elements.
<h1>This tags are used as header element to display the heading contents which are more importants. These are also called Page Titles.
<h2>This tags are used as a headers which are used as Page Titles.
<h3>This tags are used as the headers which are used as Tertiary Headings.
<h4>This tags are used as a headers which are used as Quaternary Headings.
<strong>This tags are used to display Bold Texts.
<span>This tags are used to display Underlined Texts using the style attributes.
<img>This tags are used to inserts and defines an image on an HTML web pages.

HTML SEMANTIC ELEMENTS

<div>This tags are used to mentions any HTML elements inside this tags which act as a container tags.
<span>This tags are used to apply grouping and style to the element inline.
<article>This tags are used to defines the self-contained contents inside the HTML documents.
<header>This tags are used to defines the header content of a sections or documents.
<footer>This tags are used to define footer contents of its nearest or sectioning root elements.
<nav>This tags are used to defines the link to other pages or parts within the same pages.

HTML NON SEMANTIC ELEMENTS

<form>This tags are used to declare a form which contain many pairs.
<table>This tags are used to creatse a table on a web pages.
<article>This tags are used to define the self-contained composition inside the HTML contents.

Leave a Reply

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