[HTML9] Top Menu


[HTML5] Ads(SP-UP-LNK-728x15)

Simple HTML <FORM> Codes </FORM>

Form on webpage is a powerful interface to interact with viewer and collects information.
HTML Form Working:

Form work in three steps
Input: It collects information. But don’t process information itself.
Processing: Collected information sent to form processor program for processing. Information processing program can be CGI, JavaScript Function, milto: links or webpage.
Output: Output of form processor is either an email or input for another program.

Form Code Design
Form code starts with <FORM Form_Elements >, in-between Form_Body_Tags and ends with </FORM> tag.

<FORM    element_1   element_2   element_3 …. >

1.   Form_Elements: NAME=”form_name”  ACTION=”URL”  METHOD=”POST”   ENCTYPE=”…….” 

NAME: Form name for its identity. 

ACTION: Specifies destination where to send information for processing.

ACTION=” URL(relative/absolute)”    ---    for CGI program and Webpage
ACTION=”javascript:SomeFunction()”    ---    JavaScript

METHOD: Specifies the method how the information will be sent. It is of two types “GET” and “POST”. Depends on destination program or function how it wants to receive the information. METHOD=”GET” or METHOD=”POST”.

GET (Default): This method sends form information via browser URL so it is visible to user. Example- http://domain.com/handler.cgi?color=red&shape=round
* Form information visible in browser address bar. Hence it is not fit for user authentication forms.
* Sends only limited amount of information (256 bytes-1K) depending upon destination server. 

POST: This method sends form information in invisible way(within body of request).
* Form information invisible to user so fit for user authentication forms.
* Most commonly used method.
* Used when sending information to JavaScript functions.
* Most CGI programs are written to accept information with post method. It can send much more information than GET. It limit to 32K. 

ENCTYPE: Specifies the type of encryption use while sending information.
* The default ENCTYPE attribute: ENCTYPE=”application/x-www-form-urlencoded”
* For file upload ENCTYPE attribute: ENCTYPE=”multipart/form-data”
2.   Form_Body_Tags:  <INPUT>, <SELECT>, <TEXTAREA>
     <INPUT>:  Creates single line input field.
 <INPUT  ATTRIB1=”..”  ATTRIB2=”..”  ATTRIB3=”..”> (closing tag not required)

* NAME : unique tag name.
* VALUE : predefined value for tag.
* TYPE : specify the type of <INPUT> tag. and types are below: 
    # submit : Creates a Submit Button. After click sends form information to processing program.
    # password : Same as type=”text” but input character displayed as “*”.
    # checkbox : Creates check box.
    # radio : Creates radio button.
    # hidden : Creates hidden field to hide the information from user so that it may not change.
    # file  : Create button to upload file. It “accept” attribute optionally used for selecting file type to upload. Example: All image file – “image/*”
              Only gif file – “image/gif”
              Gif & Jpg – “image/gif,jpg,jpeg”
              <input type="file" name="upfile" accept="image/*">     
Important: <FORM> element ENCTYPE=”multipart/form-data” is used when using file upload. 

    # reset : Creates a Reset Button. After click reset form to starting stage. May not required “value” & “name” attribute. 
    # button : Creates a clickable button with text you specify in the “value” attribute.
  • This type of button is typically used to send information to a JavaScript function with the “onClick” attribute.
  • Submit button may be optional.
<INPUT TYPE="button" VALUE="New message" onClick="return alert('a message')"> 
    # image : Shows an image in place of submit button, on click act as “submit”.
  • “src” attribute must be used to specify image address.
  • All attributes of <img> HTML tag optionally may be used like-“align”, “border”, “height”, “width”, “hspace”, and “vspace”.
<INPUT  TYPE="image"  NAME="imageclick"  SRC="myimage.gif"  BORDER="0">
* SIZE :  Specify the size of the text input area.
* MAXLENGTH :  Specify max number of characters that may be typed into the input area.
* PLACEHOLDER : A short hint showing expected value in field.
* ACCEPT : used only with “file” attribute.
* SRC  :  used only with “image” attribute.

<SELECT> : Creates drop down and menu box.

<SELECT name="myselect" size="3" >
<OPTION value="1">First</OPTION>
<OPTION value="2" SELECTED>Second</OPTION>
<OPTION value="3">Third</OPTION>
</SELECT>  (closing tag required)

<TEXTAREA> : Creates a multiline text area. 

Enter your address 
</TEXTAREA>   (closing tag required) 

  • NAME : Unique tag name.
  • ROWS : Specifies the number of visible lines of text.
  • COLS :  Specifies the visible width of the text area.

Example Code:

<b><u>Test Form</u></b><br><br>

<form name="simple_form" action="http://example.com/script.php" method="post">
Name: <input type="text" name="name_field" value="" size="20" maxlength="30" placeholder="Your name here"><br><br>
Email: <input type="text" name="email_field" value="" size="20" maxlength="30" placeholder="id@mail.com"><br><br>
Password: <input type="password" name="pwd_field"  /><br><br>
<input type="radio" name="radio_button_1"  value="yes" >Male 
<input type="radio" name="radio_button_1"  value="yes" >Female<br><br>
You have: <br>
<input type="checkbox" name="check_box_1"  value="yes" >Laptop
<input type="checkbox" name="check_box_2"  value="yes" CHECKED>Desktop
<input type="checkbox" name="check_box_3"  value="yes" >Tab<br><br>
You like: <br>
<SELECT name="selection_field" size="4" >
<OPTION value="1">Laptop</OPTION>
<OPTION value="2" SELECTED>Desktop</OPTION>
<OPTION value="3">Tab</OPTION>
<OPTION value="4">All above</OPTION>
<textarea name="comment_field" rows=5 cols=20>Your comment</textarea><br><br>
<input type="reset" name="reset_button">
<input type="submit" name="submit_button">

Test Form





You have:

You like:

(All HTML attributes are case insensitive, so it may written in capital or small) 


for ict 99 said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

Post a Comment

Your remarks here!