Category: html

HTML Forms

HTML forms are used to pass data to a server either using get/post method.

A form can contain input elements like text fields, check-boxes, radio-buttons, submit buttons and more. A form can also contain select lists, text area and label elements.

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

HTML Forms – The Input Element

The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

The most used input types are described below.

Text Fields

Text Fields a one-line input field that a user can enter text into

<input type="text" />

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

The above HTML code looks like below in a browser:

Form fields with input type text

Password Field

<form>
Password: <input type="password" name="pwd" />
</form>

The above code will look like below in the browser

Password field in form in browser

Note: The characters in a password field are masked (i.e, shown as asterisks or black dots). 

Radio Buttons

Radio buttons let a user select only one one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Radio buttons in browser

Checkboxes

Checkboxes let a user select one or more options of a limited number of choices. For example selecting all the vehicles I own while filling a form.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car 
</form>

Checkbox in browser

Submit Button

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The api/server defined in the action attribute usually does something with the received input and does generate appropriate response and pass it back to the client/user.

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Form submit button in browser

If you type some characters in the text field above and click the “Submit” button, the browser will send your input to a page called “html_form_action.php”. In that page(php) you can access all the data received and process it accordingly.

All html tags explained with a short definition

TagDescription
<!–…–>Defines a comment
<!DOCTYPE> Defines the document type
<a>Defines an anchor
<abbr>Defines an abbreviation
<acronym>Defines an acronym
<address>Defines contact information for the author/owner of a document
<applet>Deprecated. Defines an embedded applet
<area />Defines an area inside an image-map
<b>Defines bold text
<base />Defines a default address or a default target for all links on a page
<basefont />Deprecated. Defines a default font, color, or size for the text in a page
<bdo>Defines the text direction
<big>Defines big text
<blockquote>Defines a long quotation
<body>Defines the document’s body
<br />Defines a single line break
<button>Defines a push button
<caption>Defines a table caption
<center>Deprecated. Defines centered text
<cite>Defines a citation
<code>Defines computer code text
<col />Defines attribute values for one or more columns in a table 
<colgroup>Defines a group of columns in a table for formatting
<dd>Defines a description of a term in a definition list
<del>Defines deleted text
<dfn>Defines a definition term
<dir>Deprecated. Defines a directory list
<div>Defines a section in a document
<dl>Defines a definition list
<dt>Defines a term (an item) in a definition list
<em>Defines emphasized text 
<fieldset>Defines a border around elements in a form
<font>Deprecated. Defines font, color, and size for text
<form>Defines an HTML form for user input
<frame />Defines a window (a frame) in a frameset
<frameset>Defines a set of frames
<h1> to <h6>Defines HTML headings
<head>Defines information about the document
<hr />Defines a horizontal line
<html>Defines an HTML document
<i>Defines italic text
<iframe>Defines an inline frame
<img />Defines an image
<input />Defines an input control
<ins>Defines inserted text
<isindex>Deprecated. Defines a searchable index related to a document
<kbd>Defines keyboard text
<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
<map>Defines an image-map 
<menu>Deprecated. Defines a menu list
<meta />Defines metadata about an HTML document
<noframes>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 an embedded object
<ol>Defines an ordered list
<optgroup>Defines a group of related options in a select list
<option>Defines an option in a select list
<p>Defines a paragraph
<param />Defines a parameter for an object
<pre>Defines preformatted text
<q>Defines a short quotation
<s>Deprecated. Defines strikethrough text
<samp>Defines sample computer code
<script>Defines a client-side script
<select>Defines a select list (drop-down list)
<small>Defines small text
<span>Defines a section in a document
<strike>Deprecated. Defines strikethrough text
<strong>Defines strong text
<style>Defines style information for a document
<sub>Defines subscripted text
<sup>Defines superscripted text
<table>Defines a table
<tbody>Groups the body content in a table
<td>Defines a cell in a table
<textarea>Defines a multi-line text input control
<tfoot>Groups the footer content in a table
<th>Defines a header cell in a table
<thead>Groups the header content in a table
<title>Defines the title of a document
<tr>Defines a row in a table
<tt>Defines teletype text
<u>Deprecated. Defines underlined text
<ul>Defines an unordered list
<var>Defines a variable part of a text
<xmp>Deprecated. Defines preformatted text
HTML tags

All the html tags format the text accordingly.

Its up to the developer to use appropriate tag according to the requirement.

Some of the major attributes are explained below that will go with almost every html tag element.

AttributeValueDescription
classclassnameSpecifies a classname for an element(refereed to using . selector)
ididSpecifies a unique id for an element(refereed using # selector )
stylestyle_definitionSpecifies an inline style for an element(inline CSS)
titletooltip_text Specifies extra information about an element (displayed as a tool tip on mouse hover)
Major HTML attributes

Make a list menu element active when included using php include

Often there is a requirement to make a menu element active when we import something using php include. Its quite simple and this is how its done.

<? php include "includes/sidebar.php"; ?>  

(sidebar.php):

<ul id="sidebar">
  <li><a href="link1.html">Link1</a></li>
  <li><a href="link2.html">Link2</a></li>
  <li><a href="link3.html">Link3</a></li>
  <li><a href="link4.html">Link4</a></li>
</ul>

CSS:

ul#sidebar > li.active {
 background-color:#6495ED;
 color:#fff;
}

JavaScript (jQUery solution):

//current url being access
 var cur_href = window.location.href;
 $(document).ready(function(){
  $("#sidebar li a").each(function(){
   //get current href link
   var cur_attr =$(this).attr('href');  
   //save into regex
   var regex = new RegExp(cur_attr,"ig");
   //test if current link and current href matched
   if(regex.test(cur_href)) {
    $(this).parent().addClass('active'); //if yes then addClass 'active'
   } else {
    $(this).parent().removeClass('active'); //else removeClass 'active'
   }
  });
 });

This will make current menu link active in sidebar.

Escape HTML entities in JavaScript variables to render as plain text

Rendering strings containing HTML entities would require special attention as browser can only understand HTML tags and are formatted according to the HTML entities. So this post will help in dealing with such cases which will render HTML entities as plain text in browser.

First step:

1
2
3
4
5
function escapeHtml (string) {
return String(string).replace(/[&<>”‘`=/]/g, function (s) {
return entityMap[s];
});
}

This is the major function that does the espcaping of HTML entities. As you can see it require an entityMap which contains all HTML entities that you want to require.

So here is our enitityMap:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var entityMap = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
        '/': '&#x2F;',
        '`': '&#x60;',
        '=': '&#x3D;'
};

As you can notice that these are the possible basic HTML entities, you can convert them to escape string that browser understands as plain text.

So what next:

We are all ready and I am giving you a sample text to test this.

1
2
text = escapeHtml(text);
$("#demo").html(text);

When you do all the above mentioned steps correctly, you would get the following result.

1
<स्क्रिप्ट भाषा = PHP> </ script> </ Body> # यह एक टिप्पणी है, और print <<<END $ 4 <tab> = <tab2 <tab> + <tab> 2// रिक्त स्थान और टैब <? Php ?>

Observe that all HTML tags are restored as it is.

Still having a problem you can check our live demo over here.