Skip to main content

HTML Forms

HTML Tutorial on Forms:

1. HTML Text Box:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Form input</TITLE>
</HEAD>
<BODY>
    <form action="">
    First Name:<input type="text" name="firstname"><br><br>
    Last Name:<input type=""text" name= "lastname">
    </form>
</BODY>
</HTML>

OUTPUT:

------------------------------------------------------------------------------------

2. HTML Input Password:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Form Pwd input</TITLE>
</HEAD>
<BODY>
    <form action="">
    First Name : <input type="text" name="firstname"><br><br>
    Password : <input type="password" name="password">
    </form>
</BODY>
</HTML>

OUTPUT:

-----------------------------------------------------------

3. HTML Form Checkbox:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Check box</TITLE>
</HEAD>
<BODY>
    <form action="">
    <input type="checkbox" name="color" value="red">RED</br>
    <input type="checkbox" name="color" value="green">GREEN
    </form>
</BODY>
</HTML>

OUTPUT:

----------------------------------------------------

4. HTML Form Radio Button:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Radio Button</TITLE>
</HEAD>
<BODY>
    <form action="">
    <input type="radio" name="Gender" value="Male">Male<br>
    <input type="radio" name="Gender" value="Female">Female
    </form>
</BODY>
</HTML>

OUTPUT:

---------------------------------------------------------------

5. HTML Form Drop Down List:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>   
    <TITLE>Drop Down list</TITLE>
</HEAD>
<BODY>
    <form action="">
    <Select name="Colors">
    <option value="Red">RED</option>
    <option value="Green">GREEN</option>
    <option value="Blue">BLUE</option>
    <option value="Yellow">YELLOW</option>   
    <option value="Black">BLACK</option>
    </select>
    </form>
</BODY>
</HTML>

OUTPUT:

----------------------------------------------------

6. HTML Form Drop Down List (Selected value)

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Drop Down 1</TITLE>
</HEAD>
<BODY>
    <form action="">
    <Select name="Colors">
    <option value="Red">RED</option>
    <option value="Green" Selected>GREEN</option>
    <option value="Blue">BLUE</option>
    <option value="Yellow">YELLOW</option>   
    <option value="Black">BLACK</option>
    </select>
    </form>
</BODY>
</HTML>

OUTPUT:

---------------------------------------

7. HTML Form Button:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Button</TITLE>
</HEAD>
<BODY>
    <form action="">
    <input type="button" value="Submit">
    </form>
</BODY>
</HTML>

OUTPUT:

-------------------------------------------

8. HTML Form Fieldset:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Formdata border</TITLE>
</HEAD>
<BODY>
    <form action="">
    <fieldset>
    <legend>log in</legend>
    Username:<input type="text"><br><br>
    Password:<input type="Password"><br><br>
    <input type="button" value="Log in">
    </fieldset>
    </form>
</BODY>
</HTML>

OUTPUT:

 --------------------------------

9. HTML Form TextArea:

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>Text Area</TITLE>
</HEAD>
<BODY>
    <textarea rows="15" cols="25">
    HTML - Hyper Text Markup Language.
    </textarea>
</BODY>
</HTML>

OUTPUT:


Comments

Popular posts from this blog

Use of HTML Quotation, Blockquote and Cite.

1. Quotation            In HTML for quotation mark you need to use <q>--</q> tag. The browser can understand the meaning of  <q> tag.
Syantax: <q> Sentence for quotation </q>
Example:<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> HTML Quotation</TITLE>
<HEAD>
<BODY>

    <H1> Example of HTML quotation mark</H1>

    <H2><p><q>A complete tutorial of HTML with htmlrun.com</q>
    </p></H2>

</BODY>
</HTML>


Output:


2. Blockquote.        In HTML for blockquote you have to use <blockquote> tag. To make a block of any paragraph with just like a justify alignment in word.

Syntax:<blockquote> Large number of sentences </blockquote>
Example:<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE> HTML BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H1>Example of Blockquote</H1>

<BLOCKQUOTE>
A www.htmlrun.com is a HTML tutorial website and
a blog. Usi…

Difference between button and submit

Button vs Submit.1. Button: <Input type="button">   This is only a simple button. This will allow to call java script function and this can't do anything itself.


recomanded:what is ANI?

2. Submit:<Input Type="submit">    This submit button will submit the form on clicking but if when this submit button is inside the form element.