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 …. >
Form_Body_Tags_With_Attributes
</FORM>
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
ACTION=”mailto:name@domain.com”
ACTION=”mailto:name@domain.com?subject=My%20Subject”
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”
<INPUT>: Creates single line input field.
<INPUT ATTRIB1=”..” ATTRIB2=”..” ATTRIB3=”..”> (closing tag not required)
Attributes:
* 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.
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 …. >
Form_Body_Tags_With_Attributes
</FORM>
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
ACTION=”mailto:name@domain.com”
ACTION=”mailto:name@domain.com?subject=My%20Subject”
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)
Attributes:
* 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.
# 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”.
* 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.
<TEXTAREA NAME="TextField1" ROWS=5 COLS=30>
Enter your address
</TEXTAREA> (closing tag required)
Attributes:
- 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>
</SELECT><br><br>
<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">
</form>
Test Form
(All HTML attributes are case insensitive, so it may written in capital or small)
0 comments :
Post a Comment
Your remarks here!