ankitweblogic logo
W e b t u t o r i a l s

Define Website

Define HTML

HTML, Head, Title tag

HTML Body tag

HTML Heading tags

HTML Paragraph tag

HTML Horizontal Line

HTML Hyperlink

HTML Image tag

HTML Font tag

HTML Exercise

HTML Text Direction

HTML Comment

HTML Lists

HTML Marquee tag

HTML Table tag

HTML Table Website

HTML Frame

HTML Iframe

HTML Fieldset tag

HTML Form Elements

HTML Form Exercise

HTML Image Map

HTML Div & Span Tag

CSS Float & Clear

HTML Color Codes

HTML Symbols

HTML Assignment

HTML Form Elements

HTML forms are required when you want to collect some data from user. For example during user registration you would like to collect information like name, email id, phone number, address etc. Common HTML forms are Registration form, Login Form, Contact us form, Entry form, Survey form, Subscription form, Feedback form etc.

The different types of HTML Form elements are:

Input Type Text

The Input type text is the most common and most important form element, in which user can enter information in the form of text. It allow visitors to enter text in a single line.
Single-line text input: It allow visitors to enter text in a single line.
Password text input: It provide a way for user's to securely enter a password. The text entered in password box is protected so that it cannot be readable, usually by replacing each character with a asterisk ("*") symbol or a dot ("•"). This character may vary depending on the user browser and Operating System.
Multi-line text input: If you want to accept text in the form of multiple lines, then use HTML <textarea> tag.

Example 1: Three different types of HTML textbox's.

<form>
  Username <input type="text">
  Password <input type="password" />
  Description <textarea rows="5" cols="22"></textarea>
</form>

HTML Input type text attributes are:

Attribute Description
size Specify the width of text box.
maxlengthThe maximum number of characters allowed in a text box.
valueSpecifies the intial value for the control.
placeholder Specifies the intial value for the control in grey color.
disabled To Disable the text box.
readonly To make the text box readonly.
required Cannot leave it empty, value is required.

HTML size attribute

<input type="text" size="25">

HTML maxlength attribute

<input type="text" maxlength="10">

HTML value attribute

<input type="text" value="YourName">

HTML placeholder attribute

<input type="text" placeholder="eg. myemail@gmail.com">

HTML disabled attribute

<input type="text" disabled placeholder="disabled">	

HTML readonly attribute

<input type="text" readonly placeholder="readonly">

After making a textbox disabled or readonly, user would not be able to write or edit text written inside the textbox, user can only read the text.

Input Type Checkbox

Input type checkbox are used when more than one option is required to be selected.

Example 2: Input type checkbox.

Select Games:
<input type="checkbox" checked="true"> Hockey
<input type="checkbox"> Football 
<input type="checkbox"> Cricket 
<input type="checkbox"> VolleyBall

Input type checkbox attributes are:

Attribute Description
checked To checked the checkbox by default.
disabled To make the checkbox disabled.

Input Type Radio

Input type radio buttons are used when only one option is required to be selected out of many available options.

Example 3: Input type radio.

Select Gender:
<input type="radio" name="gender" Checked="true"> Male
<input type="radio" name="gender"> Female

Input type radio button attributes are:

AttributeDescription
checkedTo checked the radio button by default
disabledTo make the radio button disabled.

Input type select

Select box is use to provide various options in the form of drop down list, from where a user can select one or more options.

Example 4: HTML Select Box.

Select Age:
<select>
  <option>Select</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
</select>

Select Box attributes are:

AttributeDescription
selectedTo make a option as default selected
sizeTo change select box size/height
multipleTo allow select box with multiple selection.
optgroupTo make a group of options and specify group label.
autofocusTo make a option default selected.

Note: Hold down the ctrl key to select multiple dis-continuous selection or press shift key for continuous selection.

Example 5: Select optgroup tag.

<select>
  <option>Select</option>
  <optgroup label="Web Designing">
    <option>HTML</option>
    <option>CSS</option>
    <option>JS</option>
    <option>Bootstrap</option>
  </optgroup>
  <optgroup label="Web Development">
    <option>Jquery</option>
    <option>PHP</option>
    <option>MySQL</option>
    <option>SEO</option>
  </optgroup>
</select>

Exercise 6: Select Box

Select DOB 
Select Subject 
Select Company 

Input type file

If you want to allow a user to upload a file in your web server, than you need to design HTML code for selecting a file and PHP code for uploading file in server.

This example show you only the HTML code, PHP code will be discuss in PHP tutorial

Example 7: Input type file

Select File To Upload: 
<input type="file"> 

Input type file has a attribute accept, whose value can be: .gif , .jpg , image/* , audio/* , video/*

<input type="file" accept=".gif">
<input type="file" accept=".jpg">
<input type="file" accept=".gif, .jpg">
<input type="file" accept="image/*">
<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*, video/*">

Input type button

In HTML, you can create a clickable button width 3 ways. i.e.
1. Simple Button - use to create a simple button which will perform some action when user clicks on it, action is the function written in any scripting language like javascript.
2. Submit button - Creates a button that automatically submits a form and redirect you to another page mentioned in action attribute.
3. Reset button - Creates a button that automatically resets form elements to their initial values.

Example 8: HTML button types.

<input type="button" value="Simple Button">
<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">

In the above example, Username is set with 'Enter name' value and maxlength is 10, Password field is readonly, Email textbox with placeholder 'Enter Email', Description with multiple lines.