HomeFAQSearchMemberlistRegisterLog in

Share | 
 

 HTML TUTORIAL PART 8: EXPLANATION OF INPUT, LISTS, IMAGES TAG

View previous topic View next topic Go down 
AuthorMessage
Arvind
Administrator
Administrator
avatar

Posts : 132
Points : 266
Join date : 2009-06-16
Location : Still exploring where i am.....

PostSubject: HTML TUTORIAL PART 8: EXPLANATION OF INPUT, LISTS, IMAGES TAG   Mon Jul 13, 2009 2:14 pm

HTML TUTORIAL PART 8: EXPLANATION OF INPUT, LISTS, IMAGES TAG

INPUT TAGS


<form> </form>


The HTML form tag acts as a container for controls. Forms are used to collect and process information inputted by the users, through its controls. The attributes of the HTML form tag defines significant information about how and who will process its data, while the controls inside of it take care of the data input. A form may have many controls that can be grouped thematically with the HTML fieldset tag.

LIVE EXAMPLE:

Please Visit this link LIVE DEMO for demo of form tag


<input> </input>


The HTML input tag is used to display control elements that allow users to input data in a form. The conduct of the control depend mostly on the "type" attribute. This attribute defines the kind of control to be shown.

The "type" attribute can take several values that will be described next.

->text
This value defines a control designed for text input. This type of field allow users to input textual data (e.g., names, titles, etc.).

->password
This control type works exactly like the text type with a small difference: password types usually hide the characters inputted using dots or asterisks instead.

->checkbox
Each checkbox works as an on/off switch (boolean values). This control is commonly used in forms to select options, interests, etc. Several checkboxes can share the same control name, allowing authors to set more than one value for a single property.

->radio
Radio buttons works like checkboxes. The difference is that radio buttons, when sharing a single control name, are exclusive. This means that only one of those radio buttons can be checked, and when it's checked, the rest are automatically unchecked.

->submit
The submit type creates a button. When a submit button is pressed it automatically submits the form.

->image
This type value creates a submit button that can take a graphical aspect. Graphical submit buttons can also be used as image maps. When clicked, a graphical submit button named "button1" also sends the coordinates of the pointing device (where in the image the click occurred): "button1.x" and "button1.y".

->reset
This type creates a button. When a "reset" button is clicked, all the form's fields are resetted to their respective initial values.

->button
The button type creates an ordinary button with no default action associated to it. Acctions for this buttons are usually defined with client side scripts (e.g., JavaScript).

->hidden
This type of control allows authors to insert values in a form that are not rendered but still submitted with the form. These values are mostly used when forms consist of two or more stages, where the transition from one stage to the next is achieved by the submission of a form. Then, the values of the previous stage are "saved" in "hidden" inputs.

->file
This control type allows users to select a file to upload. The file is uploaded when the form is submitted. Note that for files upload, the form's attribute "enctype" must take the value "multipart/form-data".


LIVE DEMO:
Again for this we can got to the w3school for LIVE DEMO


<textarea> </textarea>


The HTML textarea tag creates a control for text input. This control provides a rectangular field that accept multi-line text input (use HTML input tag for single line input). This tag is mostly used in forms (HTML form tag).

LIVE DEMO:
Again for this we can got to the w3school for LIVE DEMO


<button> </button>


The HTML button tag creates a button. It's most common use is to work as a control in forms, but it can also be used to performs actions (through scripts) anywhere. Buttons can also be defined with the HTML input tag, when it's type attribute is "button", but the HTML button tag inserts buttons that allow content. This means that you can put HTML code inside of them.

USAGE EXAMPLE:
Code:

<button type="button">I am a Button!!</button>


<select> </select>


The HTML select tag creates a control through which users are able to select from a list of options (HTML option tag).

USAGE EXAMPLE:
Code:

<select>
  <option>INFINITUDE EMBASSY</option>
  <option>ALL ABOUT COMPUTER SCIENCE</option>
  <option>INFINITUDE BRAIN BUSTER'S ZONE</option>
  <option>INFINITUDE LOUNGE</option>
  <option>GENERAL HELP</option>
  <option></option>
</select>


<optgroup> </optgroup>


The HTML optgroup tag allows authors to group options in a select list, that's in your select tag.

USAGE EXAMPLE:
Code:

<select>
  <optgroup label="INFINITUDE EMBASSY">
  <option>INFINITUDE ANNOUNCEMENT ZONE</option>
  <option>INTRODUCTION</option>
  <option>SUGGESTION BOX</option>
  </optgroup>
  <optgroup label="ALL ABOUT COMPUTER SCIENCE">
  <option>INFINITUDE PROGRAMMING SCHOOL</option>
  <option>PROGRAMMING ARENA</option>
  </optgroup>
  <option></option>
</select>

<option> </option>


The HTML option tag defines an option in an options list control

we have used this tag in all the above examples so i guess we don't need anothe example for this tag Smile



<label> </label>


The HTML label tag can be associated to a control and provide information about it. As it's name says, it assigns a label to the control. Note that when a label receives the focus, it's associated control receives the focus automatically.


USAGE EXAMPLE:
Code:

<form>
  <label for="Username">Username</label>
  <input type="text" name="name" id="Username" />
  <br>
  <br>
  <label for="Password">Password</label>
  <input type="text" name="Pass" id="Password" />
</form>

<fieldset> </fieldset>


The HTML fieldset tag groups controls in a form. This allows authors to group thematically the controls of a form, making it easier to understand and fill in for the user.

USAGE EXAMPLE:
Code:

<form>
<fieldset>
<legend>Login:</legend>
UserName: <input type="text" size="30"><br>
Password: <input type="password" size="30"><br>
</fieldset>
</form>

<legend> </legend>


The HTML legend tag assigns a caption to a fieldset (HTML fieldset tag). It must be defined after the fieldset start tag as shown in the above example.


<isindex>


<ISINDEX ...> is the old way to make an online form. The purpose of <ISINDEX ...> has been entirely fulfilled and greatly expanded by regular forms, so use regular forms instead. For the sake of completion, we'll explain a little about <ISINDEX ...> here anyway.

The easiest way to think of <ISINDEX ...> is that it is a form which takes only one input, there is only one input on the page, and it can only return the results to the CGI that created the page in the first place. The value entered in the input field is URL encoded and added with a "?" to the end of the current URL, and the query is resubmitted to the current URL. The format for the tag is easy: just put <ISINDEX ...> in the <BODY ...> section of the document, generally at the top.

USAGE EXAMPLE:
Code:

<ISINDEX>
<H1>Example of &lt;ISINDEX&gt;</H1>
This page uses the &lt;ISINDEX&gt; tag.  Type in the name
of your state for a listing of your congresspeople.

-Arvind
Back to top Go down
View user profile http://infinitude.nsguru.com
Arvind
Administrator
Administrator
avatar

Posts : 132
Points : 266
Join date : 2009-06-16
Location : Still exploring where i am.....

PostSubject: HTML TUTORIAL PART 8: EXPLANATION OF INPUT, LISTS, IMAGES TAG   Mon Jul 13, 2009 2:40 pm

LISTS TAGS


<ul> </ul>


The HTML ul tag inserts an unordered list. The elements in this list are defined by the HTML li tag.

USAGE EXAMPLE:
Code:

<h4>Fruits:</h4>
<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Grape</li>
  <li>Orange</li>
</ul>


<ol> </ol>


The HTML ol tag inserts an ordered list. The elements in this list are defined by the HTML li tag.

USAGE EXAMPLE:
Code:

<h4>Fruits:</h4>
<ol>
  <li>Apple</li>
  <li>Mango</li>
  <li>Grape</li>
  <li>Orange</li>
</ol>


<li> </li>


The HTML li tag defines a list item for ordered (HTML ol tag) and unordered (HTML ul tag) lists. We have seen the usage of li tag in the above examples so we are skiping this example part Smile


<dir> </dir>


The <dir> tag is used to list directory titles.

USAGE EXAMPLE:
Code:

<dir>
  <li>Admin</li>
  <li>Moderator</li>
  <li>Users</li>
</dir>


<dl> </dl>, <dt> </dt>, <dd> </dd>


The HTML dl tag defines a list. A list is composed by terms (HTML dt tag) and descriptions (HTML dd tag). The order and structure of a list is left to the author consideration. The most common type of list is structured by a sequence of terms and descriptions, where each description is visually associated to a term.

USAGE EXAMPLE:
Code:

<dl>
  <dt>HTML</dt>
    <dd>- Hyper Text Markup Language</dd>
  <dt>XML</dt>
    <dd>- Extended Markup Language</dd>
</dl>

The HTML dt tag defines a term in a list (HTML dl tag). A term may have a description (HTML dd tag) visually associated.

The HTML dd tag defines a description in a given list (HTML dl tag). This description may be visually associated to a term (HTML dt tag) or not. Also, many descriptions can be associated to a single term, all depending on the order of the tags. This is left to the author cosideration.


<menu> </menu>


As the name implies it defines a menu list.

USAGE EXAMPLE:
Code:

<menu>
  <li>html</li>
  <li>xhtml</li>
  <li>css</li>
</menu>


-Arvind
Back to top Go down
View user profile http://infinitude.nsguru.com
Arvind
Administrator
Administrator
avatar

Posts : 132
Points : 266
Join date : 2009-06-16
Location : Still exploring where i am.....

PostSubject: HTML TUTORIAL PART 8: EXPLANATION OF INPUT, LISTS, IMAGES TAG   Mon Jul 13, 2009 3:12 pm

IMAGES TAGS


<img>


he HTML img tag inserts the image file pointed by the "src" attribute, where it's defined, but it can also be set as "floating". It's a better practice to do this using style sheets instead of the deprecated "align" attribute.

USAGE EXAMPLE:
Code:

<img src="http://www.ludiques.net/images/smilies.gif" alt="Angry face" width="150" height="150">


<map>


The HTML map tag defines a client-side image map that provides a way to associate areas of an image with links to other documents. These linked areas are defined by the HTML area tag.

LIVE EXAMPLE:

Click on this link to view the LIVE DEMO for map tag


<area>


The HTML area tag defines a sector or shape of an image map. This sector can be linked to a resource or a bookmark (like a normal HTML a tag).

In the previous example we saw the usage of the area tag, so we are skipping this example part for area tag Smile


-Arvind
Back to top Go down
View user profile http://infinitude.nsguru.com
Sponsored content




PostSubject: Re: HTML TUTORIAL PART 8: EXPLANATION OF INPUT, LISTS, IMAGES TAG   

Back to top Go down
 
HTML TUTORIAL PART 8: EXPLANATION OF INPUT, LISTS, IMAGES TAG
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» How do I make the login popup show an Image, instead of it's bland colors
» HTML Alone
» Need a custom html page?
» How to get the value of an input with Web Driver?
» How to store a HTML comment in selenium

Permissions in this forum:You cannot reply to topics in this forum
 :: ALL ABOUT COMPUTER SCIENCE :: INFINITUDE PROGRAMMING SCHOOL :: HTML COMPLETE TUTORIAL-
Jump to: