HTML Tutorial

Div

The div tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS. Div can be used extensibly with id and class attributes.

The difference between the div tag and the span tag is that the div tag is used with blocklevel elements whilst the span tag is used with inline elements.

For example:

    			
<div>This is a div</div>
<div id="div2">This is a div as well</div>
    			
    		

Becomes:

Span

The HTML tag is used for grouping and applying styles to inline elements.

This doesnt take up the entire line. Takes up only as much space as the content in it.

For Example:

    			
<span>This is one span.</span>
<span>This is another span.</span>    				
    			
    		

Becomes:

Forms

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

For Example:

    			
<form action = "Script URL" method = "GET|POST">
	form elements like input, textarea etc.
</form>    				
    			
    		

Becomes:

Form has several tags associated to it. Let's take a look at them.

Fieldset

It is used to create a border around the form specifying the field in which the form is present.

For Example:

    			
<fieldset>
	<form>
		form elements like input, textarea etc.
	</form>
</fieldset>    				
    			
    		

Becomes:

Legend

Legend is used to give a heading to the form on the border provided by fieldset

For Example:

    			
<fieldset>
	<legend>Form 1<legend>
	<form>
		form elements like input, textarea etc.
	</form>
</fieldset>    				
    			
    		

Becomes:

Label

Label tag is used to specify what is the value to provide while taking input. We can give details about the type of input we want to take in label.

For Example:

    			
<fieldset>
	<legend>label</legend>
	<form>
		<label>Name(string):</label><br>
		<label>Age(number):</label>
	</form>
</fieldset>    				
    			
    		

Becomes:

Input

Input tag is used to allow the user to write andd we can use this data for any purpose we want. Input has the following attributes which determine its behaviour.

The type attribute is very important and is used to specify the type of input we take.

For Example:

    			
<fieldset>
  <legend>Input Type</legend>
  <form>
	<label>Text:</label><br><input type="text" name="name"><br>
	<label>Number:</label><br><input type="number" name="number"><br>
	<label>Date:</label><br><input type="date" name="date"><br>
	<label>Radio:</label><br><input type="radio" name="radio"><br>
	<label>Checkbox:</label><br><input type="checkbox" name="checkbox"><br>
	<label>Email:</label><br><input type="email" name="email"><br>
	<label>URL:</label><br><input type="url" name="url"><br>
	<label>Button:</label><br><input type="button" name="button" value="Send"><br>
	<label>Submit:</label><br><input type="submit" name="submit"><br>
	<label>Password:</label><br><input type="password" name="password"><br>
	<label>Range:</label><br><input type="range" name="range"><br>
	<label>File:</label><br><input type="file" name="file"><br>
	<label>Color:</label><br><input type="color" name="color"><br>
  </form>
</fieldset>    				
    			
    		

Becomes:

Select

The tag is used within a form for defining a select list

For Example:

    			
<fieldset>
	<legend>Select</legend>
	<form>
		<label>Branch:</label><br>
		<select>
			<option value="CSE" selected>CSE</option>
			<option value="IT">IT</option>
		</select><br>
		<input type="submit" name="submit">
	</form>
</fieldset>
    			
    		

Becomes:

Datalist

The tag specifies set of options for <input> element.

For Example:

    			
<fieldset>
	<legend>Datalist</legend>
	<form>
		<label>Enter Language of choice:</label>
		<input list = "langs">
			<datalist id = "langs">
			<option value = "C">
			<option value = "C++">
			<option value = "Python">
			<option value = "Java">
			<option value = "GO">
	</form>
</datalist>
    			
    		

Becomes:

Textarea

This tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows.

For Example:

    			
<fieldset>
	<legend>Textarea</legend>
	<form>
		<label>Enter comments:</label><br><br>
		<textarea></textarea>
	</form>
</fieldset>
    			
    		

Becomes: