HTML, CSS : Beautiful radio and checkboxes


There are two ways you can put label on radios

  • Put for="id_of_your_radio" in the label tag
  • Put the radio inside of lable tag; no need of for attribute. It will be implicit
    • <label>
       <input id="sex-other" type="radio" name="sex" value="others" /> Other
    • This technique is more cleaner, intuitive and maintainable from my perspective.

Our Target:

The basic idea is: we want to modify the label according to our design demands. But the later technique explained above has label as parent to input tag; CSS has limitation; we cannot select parent on the basis of child. In our case child (input) changes events and need to modify the label.

So going with the former technique


See here for More details

What is HTML? Its definition

The HTML stands for HyperText Markup Language.

What is HyperText?

Hypertext is text which contains links to other texts. The term was coined by Ted Nelson around 1965 (see History ).

HyperMedia is a term used for hypertext which is not constrained to be text: it can include graphics, video and sound , for example. Apparently Ted Nelson was the first to use this term too.

Hypertext and HyperMedia are concepts, not products.

What is Markup?

Markup is detailed instructions, usually written on a manuscript to be typeset, concerning style of type and makeup of pages. 

So, HTML is concept of enhancing the visual appearance of the HyperText.


Dynamically change HTML tag of elements

 * Author: Shiva Bhusal
 * website:
 * This function replaces the DOM elements's tag name with you desire
 * Example:
 * replaceElem('header','ram');
 * replaceElem('div.header-one','ram');
function replaceElem(targetId, replaceWith){
 var attributes = concatHashToString(this.attributes);
 var replacingStartTag = '<' + replaceWith + attributes +'>';
 var replacingEndTag = '</' + replaceWith + '>';
 $(this).replaceWith(replacingStartTag + $(this).html() + replacingEndTag);
 * This function concats the attributes of old elements
function concatHashToString(hash){
 var emptyStr = '';
 $.each(hash, function(index){
 emptyStr += ' ' + hash[index].name + '="' + hash[index].value + '"';
 return emptyStr;
Codepen link : 

What does enctype=’multipart/form-data’ mean in a form

HTML forms provide three methods of encoding.

  • application/x-www-form-urlencoded (the default)
  • multipart/form-data
  • text/plain

The specifics of the formats don’t matter to most developers. The important points are:

When you are writing client-side code, all you need to know is use multipart/form-data when your form includes any <input type="file"> elements.

When you are writing server-side code: Use a prewritten form handling library (e.g. Perl’s CGI->paramor the one exposed by PHP’s $_POST superglobal) and it will take care of the differences for you. Don’t bother trying to parse the raw input received by the server.

IE Only Style sheets

<!–[if !IE 6]><!–>

<link rel=“stylesheet” type=“text/css” media=“screen, projection” href=“REGULAR-STYLESHEET.css” />


<!–[if gte IE 7]>

<link rel=”stylesheet” type=”text/css” media=”screen, projection” href=”REGULAR-STYLESHEET.css” /> <![endif]–>

<!–[if lte IE 6]>

<link rel=”stylesheet” type=”text/css” media=”screen, projection” href=”; />