SlideShare a Scribd company logo

Html form

Download as PPTX, PDF
••
J
Jaya Kumari

The document discusses HTML forms and form elements. It provides objectives and descriptions of how to create forms using HTML tags like <form> and <input>. It explains various form elements including text fields, password fields, text areas, drop-down menus, checkboxes, radio buttons, and their attributes. The document provides examples of code for each form element.

Technology
1 of 21
Download to read offline
1
2
Most read
3
4
5
6
Most read
7
8
Most read
9
10
11
12
13
14
15
16
17
18
19
20
21
Internet & Web Designing BCA -302
2 HTML Form Forms add the ability to web pages to not only provide the person viewing the document with dynamic information but also to obtain information from the person viewing it, and process the information. Objectives: Upon completing this section, you should be able to 1. Create a FORM. 2. Add elements to a FORM. 3. Define CGI (Common Gateway Interface). 4. Describe the purpose of a CGI Application. 5. Specify an action for the FORM.  Forms work in all browsers.  Forms are Platform Independent
3 HTML Form  A form in HTML is contained within a form element. i.e. <form>…<</form>.  A form is made up of fields as well as the markup necessary to structure the form and potentially control its presentation.  Form fields include text fields, password fields, multiple-line text fields, pop-up menus, scrolled lists, radio buttons, check boxes, and buttons.  The form itself contains regular text, other HTML elements such as tables, and form elements such as check boxes, drop-down menus, and text fields.  In order to make the form work, you must specify two things in the <form> tag: the address of the program that will handle the form contents using action and the method by which the form data will be passed using the method attribute.
4 HTML Form To insert a form we use the <FORM></FORM> tags. The rest of the form elements must be inserted in between the form tags. <HTML> <HEAD> <TITLE> Sample Form</TITLE> </HEAD> <BODY BGCOLOR=“FFFFFF”> <FORM ACTION = http://www.xnu.com/formtest.asp> <P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P> <P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P> </FORM> </BODY> </HTML>
5 HTML Form Attributes ACTION: is the URL of the CGI (Common Gateway Interface) program that is going to accept the data from the form, process it, and send a response back to the browser. METHOD: GET (default) or POST specifies which HTTP method will be used to send the form’s contents to the web server. The CGI application should be written to accept the data from either method. NAME: is a form name used by VBScript or JavaScripts. TARGET: is the target frame where the response page will show up.
6 HTML Form ElementsText Fields Single-line text entry fields are specified using the input element and are useful for collecting small bits of data such as a user's name, address, e-mail address, and so on. It is possible to specify a multiple-line text field using the textarea element. To set a text entry control, <input> tag is used. <input type="text" name="UserName" id="UserName" size="30" maxlength="60“ value="Enter your name here”> Attributes Name /Id: All form elements should be named by setting the name attribute to some unique value. Size: By default, unless specified this field generally will be a width of 20 characters. The value of the size field for an <input> tag is the number of characters to be displayed. It is possible for the user to type more characters than this value. The text will just scroll by. Maxlength: If you want to limit the size of the field, you need to set the value of the maxlength attribute to the maximum number of characters allowed in the field. Value: The final attribute that is useful to set with a text entry field is the value attribute. With this attribute, you can specify the default text you want to appear in the field when the form is first loaded.
7 HTML Form Elements Password Fields  The password form field is the same as the simple text entry field, except that the input to the field is not echoed when typed. To set a password form control, use the <input> tag again but this time set the type attribute equal to password.  As with the text field, it is possible to specify the size of the field in characters with size and the maximum entry in characters with maxlength.  Setting a default value for the password field with the value attribute doesn't make much sense because the user can see it by viewing the HTML source of the document.  Of course, the name and id attributes should also be used on this form field.  <input type="password" name="Pass" id="Pass" size="10" maxlength="10“ >
8 Example of Password Field <HTML><HEAD> <TITLE>Form_Password_Type</TITLE></HEAD> <BODY> <h1> <font color=red>To Access, Please enter:</font></h1> <FORM name="fome2" Action="url" method="get"> User Name: <INPUT TYPE="TEXT" Name="FName“ SIZE="15“ MAXLENGTH="25"> <BR> Password: <INPUT TYPE="PASSWORD" NAME="PWord" value="“ SIZE="15” MAXLENGTH="25"><BR> </FORM></BODY> </HTML>
9 HTML Form Elements Multiple-Line Text Input When it is necessary to enter more than one line of text in a form field, the input element must be abandoned in favor of the textarea element. Like the text input field, there are similar attributes to control the display size of the data entry area as well as the default value and the name of the control. Attributes Rows: To set the number of rows in the text entry area, set the rows attribute equal to the number of rows desired. Cols: To set the number of characters per line, set the cols attribute. <textarea rows="5" cols="80" name="CommentBox" id="CommentBox"> </textarea> Because there can be many lines of text within a <textarea> tag, it is not possible to set the default text for the area using the value attribute. Instead, place the default text between the <textarea> and </textarea> tags: <textarea rows="5" cols="80" name="CommentBox" id="CommentBox"> Please fill in your comments here. </textarea> The information enclosed within a <textarea> tag must be plain text and should not include any HTML markup. In fact, the default text in a <textarea> tag preserves all the spaces, returns, and other special characters. Markup included within the form control will not be interpreted.
10 HTML Form Elements Drop-Down Menus A drop-down menu enables the user to select one choice out of many possible choices. One nice aspect of drop- down menus is that all choices do not have to be seen on the screen and are generally are hidden. To create a drop-down menu <select> tag is used. The tag should contain one or more occurrences of the option element. Each <option> tag specifies a menu choice. Like all form fields the select element has name and id attributes used to set a unique name for the field. It is also possible to set the size attribute on a <select> tag, but generally this is not set unless the menu is a scrolled list. The option element has a few attributes as well. An occurrence of the attribute selected in an <option> tag sets the form control to select this item by default. Otherwise, a browser will choose the first <option> within the select element as the default. If multiple selected attributes are specified, the result is generally to select the final <option> tag with a selected attribute. Generally, the value submitted when the form is sent is the value enclosed by the option element. However, it is possible to set the value attribute for the element that will be returned instead. <form > <select name="GadgetType" id="GadgetType"> <option>Super Gadget</option> <option value="MEG-G5">Mega Gadget</option> <option value="MO-45" selected="selected">Mongo Gadget</option> <option>Plain Gadget</option> </select> </form>
11 HTML Form Elements Check Box With the scrolled list, it is possible to select many items out of a large group of items. Unfortunately, not all the items are presented at once for the user to choose. If there are a few options to select from that are not mutually exclusive, it probably is better to use a group of check boxes that the user can check off. Check boxes are best used to toggle choices on and off. Although it is possible to have multiple numbers of check boxes and let the user select as many as he or she wants. To create a check box, use an <input> tag and set the type attribute equal to checkbox. The check box also should be named by setting the name and id attributes. If the check box is selected, a value of Cheese=on will be transmitted to the server. Setting a value for the check box might make more sense. Values to be transmitted instead of the default value can be set with the value attribute. The code Cheese: <input type="checkbox" name="Extras“ value="Cheese“ > would send a response such as Extras=Cheese to the server. It is possible to set a check box to be selected by default by using the checked attribute within an <input> tag. <form> Super-magneto: <input type="checkbox" name="mag" value="Magnetize" > <br> Kryptonite Coating: <input type="checkbox" name="krypto" value="Anti-Superman" checked="checked" > <br /> Anti-gravity: <input type="checkbox" name="antigrav" value="Anti-gravity" > <br> </form>
12 HTML Form Elements Radio Button :  Radio buttons use a similar notation to check boxes, but only one option may be chosen among many.  This is an especially good option for choices that don't make sense when selected together.  In this sense, radio buttons are like pull-down menus that allow only one choice.  The main difference is that all options are shown at once with radio buttons.  Like check boxes, this form field uses the standard <input type=""> format. In this case, set type equal to radio.  Setting the name attribute is very important in the case of radio buttons because it groups together controls that share the radio functionality.  The radio functionality says that when an item is selected, it deselects the previously pressed item. If the names are not the same, the radio group will not work.  Be careful when naming radio fields.  When working with radio buttons, the value attribute must also be carefully considered. It is important to set each individual radio button to a different value entry. Otherwise, it will be impossible to decipher which button was selected.  Like check boxes, the occurrence of the selected attribute in an <input> tag will preselect the item. Only one item may be selected as a default out of a radio group.  If the selected attribute does not occur, the browser typically will not display any items as selected. <form> Groovy Green: <input type="radio" name="Color" value="Green"> Rocket Red: <input type="radio" name="Color" value="Red" checked="checked"> Yipee! Yellow: <input type="radio" name="Color" value="Yellow"> </form>
13 HTML Form Elements Reset and Submit Button Once a form has been filled in, there must be a way to send it on its way, whether it is submitted to a program for processing or simply mailed to an e-mail address.  The input element has two values, reset and submit, for the type attribute for accomplishing this.  Setting the type attribute for an <input> tag to reset creates a button that allows the user to clear or set to default all the form fields at once.  Setting the type attribute for <input> to submit creates a button that triggers the browser to send the contents of the form to the address specified in the action attribute of the enclosing form element.  The buttons have two important attributes: value and name. The value attribute sets both the value of the button transmitted to the server and the text wording on the button.  The name value associates an identifier with the form field for submission. Ofcourse, id can be used as well for setting a name, but it is typically more related to style sheets. Because the Submit and Reset buttons cause an action, either form submission or field reset, it may not be obvious why the name field can be useful.  Although having multiple Reset buttons might not be so useful, multiple Submit buttons are useful because the value of the button is sent to the address specified in the form element's action attribute. <input type="submit" value="Place Order" name="Add“ > <input type="submit" value="Delete Order" name="Delete”> <input type="submit" value="Update Order" name="Update”> <input type="reset" value="Reset Form" name="ResetButton”>
14 HTML Form Elements <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1“ > <strong>Customer Name:</strong> <input type="text" name="UserName“ size="25" maxlength="35“ > <br> <strong>Password:</strong> <input type="password" name="Pass" id="Pass" size="10" maxlength="10" > <br> <strong>Gadget Type:</strong> <select name="GadgetType" id="GadgetType"> <option value="SG-01">Super Gadget</option> <option value="MEG-G5">Mega Gadget</option> <option value="MO-45">Mongo Gadget</option> <option selected="selected">Gadget</option> </select> <br ><br > <input type="submit" value="Order Gadget" > <input type="reset" value="Reset Form" > </form>
15 HTML Form Elements File Upload: You can use a file upload to allow surfers to upload files to your web server. <INPUT TYPE=“FILE”> Browser will display File Upload has the following attributes: TYPE: file. SIZE: is the size of the text box in characters. NAME: is the name of the variable to be sent to the CGI application. MAXLENGHT: is the maximum size of the input in the textbox in characters. <BODY bgcolor=lightblue> <form> <H3><font color=forestgreen> Please attach your file here to for uploading to My <font color =red>SERVER...<BR> <INPUT TYPE="File" name="myFile" size="30"> <INPUT TYPE="Submit" value="SubmitFile"> </form> </BODY>
16 Summary of HTML Form Elements
17 HTML Form Action Attribute The action Attribute How a form is to be handled is set using the action attribute for the form element. The action attribute usually is set to a URL of the program on the web server that will process the form data captured and being sent back. The server side program that processes this data can be written in any scripting language that the web server understands. For example, the code <form action="http://www.democompany.com/cgi-bin/post-query.pl" method="post"> would be for a script called post-query.pl in the cgi-bin directory on the server www.democompany.com. It is also possible to use a relative URL for the action attribute if the form is delivered by the same server that houses the form-handling program: <form action="../cgi-bin/post-query.pl" method="post">
18 HTML Form Method Attribute  It is also necessary to specify how the form will be submitted to the address specified by the action attribute.  How data will be submitted is handled by the method attribute.  There are two acceptable values for the method attribute: 1) get 2) post  These are the HTTP methods that a browser uses to "talk" to a server.  If the method attribute remains unspecified, it defaults to the get method.
19 HTML Form get() Method • The HTTP get method generally is the default method for browsers to submit information. • In fact, HTML documents generally are retrieved by requesting a single URL from a Web server using the get method, which is part of the HTTP protocol. When you type a URL such as http://www.democompany.com/staff/thomas.html into your Web browser, it is translated into a valid HTTP get request like this: GET /staff/thomas.html HTTP/1.1 • This request is then sent to the server www.democompany.com. What this request says, essentially, is "Get me the file thomas.html in the staff directory. I am speaking the 1.1 dialect of HTTP." • We need to pass the form data along with the name of the program to run. To do this, all the information from the form is appended onto the end of the URL being requested. This produces a very long URL with the actual data in it, as shown here: http://www.democompany.com/cgi- bin/comments.exe?Name=Matthew+Foley&Age=32&Sex=male
20 HTML Form get() Method Disadvantages: The get method isn't very secure because the data input appears in the URL. Furthermore, there is a limitation to just how much data can be passed with the get method (1024 bytes). Advantage: • First, get is easy to deal with. An example URL like the previous one should make it obvious that the Name field is set to Matthew Foley, the Age is 32, and the Sex is male. The individual form field values are separated by ampersands. Other reason to use get is that it comes in the form of a URL, so it can be bookmarked or set as a link. • The get method is used properly in search engines. When a user submits a query to a search engine, the engine runs the query and then returns page upon page of results. It is possible to bookmark the query results and rerun the query later.
21 HTML Form post() Method  In situations where a large amount of information must be passed back, the post method is more appropriate than get.  The post method transmits all form input information as a data stream immediately after the requested URL.  In other words, once the server has received a request from a form using post, it knows to continue "listening" for the rest of the information.  The get method comes with the data to use right in the URL request. The encoding of the form data is handled in the same general way as the get method by default; spaces become plus signs and other characters are encoded in the URL fashion. A sample form might send data that would look like the following: Name=Jane+Smith&Age=30&Sex=female  The benefit of using the post method is that a large amount of data can be submitted this way because the form contents are not in the URL.  In the post example, the encoding of the form data is the same as get, although it is possible to change the encoding method using the enctype attribute.  One potential downside of the post method is that pages generated by data submitted via post cannot be bookmarked.

More Related Content

PDF
Functions and Arguments in Python
Mars Devs
 
PPTX
Templates in C++
Tech_MX
 
PPTX
Procedures and triggers in SQL
Vikash Sharma
 
PPTX
Inheritance in java
RahulAnanda1
 
PPTX
Constructor and destructor in oop
Samad Qazi
 
PPTX
Data Structures: Classification of Data Structures
Navya Francis
 
PDF
Managing I/O in c++
Pranali Chaudhari
 
PPT
C++ classes
imhammadali
 
Functions and Arguments in Python
Mars Devs
 
Templates in C++
Tech_MX
 
Procedures and triggers in SQL
Vikash Sharma
 
Inheritance in java
RahulAnanda1
 
Constructor and destructor in oop
Samad Qazi
 
Data Structures: Classification of Data Structures
Navya Francis
 
Managing I/O in c++
Pranali Chaudhari
 
C++ classes
imhammadali
 

What's hot (20)

PDF
Java Inheritance
Rosie Jane Enomar
 
PPTX
Decision Making and Looping
Munazza-Mah-Jabeen
 
PPT
Structure of C++ - R.D.Sivakumar
Sivakumar R D .
 
PPTX
Functional dependencies in Database Management System
Kevin Jadiya
 
PPTX
Call by value
Dharani G
 
PDF
itft-Inheritance in java
Atul Sehdev
 
PPTX
Constructor and Types of Constructors
Dhrumil Panchal
 
PPTX
Inline function
Tech_MX
 
PPTX
Structures in c language
Tanmay Modi
 
PDF
Access specifiers (Public Private Protected) C++
vivekkumar2938
 
PDF
C++ Programming
Envision Computer Training Institute
 
PPTX
Exception handling c++
Jayant Dalvi
 
PPT
Class and object in c++
NainaKhan28
 
PPTX
Virtual Functions | Polymorphism | OOP
shubham ghimire
 
PPTX
Arrays in c
CHANDAN KUMAR
 
PDF
Control statements
Kanwalpreet Kaur
 
PPT
Visual Basic menu
kuldeep94
 
PPTX
virtual function
VENNILAV6
 
PPTX
Tree traversal techniques
Mudita Srivastava
 
PDF
PL/SQL TRIGGERS
Lakshman Basnet
 
Java Inheritance
Rosie Jane Enomar
 
Decision Making and Looping
Munazza-Mah-Jabeen
 
Structure of C++ - R.D.Sivakumar
Sivakumar R D .
 
Functional dependencies in Database Management System
Kevin Jadiya
 
Call by value
Dharani G
 
itft-Inheritance in java
Atul Sehdev
 
Constructor and Types of Constructors
Dhrumil Panchal
 
Inline function
Tech_MX
 
Structures in c language
Tanmay Modi
 
Access specifiers (Public Private Protected) C++
vivekkumar2938
 
C++ Programming
Envision Computer Training Institute
 
Exception handling c++
Jayant Dalvi
 
Class and object in c++
NainaKhan28
 
Virtual Functions | Polymorphism | OOP
shubham ghimire
 
Arrays in c
CHANDAN KUMAR
 
Control statements
Kanwalpreet Kaur
 
Visual Basic menu
kuldeep94
 
virtual function
VENNILAV6
 
Tree traversal techniques
Mudita Srivastava
 
PL/SQL TRIGGERS
Lakshman Basnet
 
Ad

Similar to Html form (20)

PPTX
HTML Forms
Nisa Soomro
 
PDF
Html Form Controls
Bosco Technical Training Society, Don Bosco Technical School (Aff. GGSIP University, New Delhi)
 
PPT
Web forms and html lecture Number 4
Mudasir Syed
 
PPTX
Html forms
nobel mujuji
 
PPTX
Designing web pages html forms and input
Jesus Obenita Jr.
 
PDF
CSS_Forms.pdf
gunjansingh599205
 
PPTX
HTML Forms: The HTML element represents a document section containing interac...
BINJAD1
 
PPT
Chapter09
Sreenivasan G
 
DOCX
Html forms
Abhishek Kesharwani
 
PPTX
Html Xhtml And Xml 3e Tutorial 6
larsonsb
 
PDF
Html forms
eShikshak
 
PDF
HTML-Forms
Ahmed Saihood
 
PPTX
Html 4
pavishkumarsingh
 
PPTX
Html 4
pavishkumarsingh
 
PPTX
html 5 new form attribute
Priyanka Rasal
 
PPTX
unit2_HTML_Forms fundamentals of html and crore concepts.pptx
22247019
 
PPTX
Html forms
Er. Nawaraj Bhandari
 
DOCX
Web(chap2)
Jafar Nesargi
 
PPTX
HTML
Emertxe Information Technologies Pvt Ltd
 
PPTX
HTML - FORMS.pptx
Nyssakotian
 
HTML Forms
Nisa Soomro
 
Html Form Controls
Bosco Technical Training Society, Don Bosco Technical School (Aff. GGSIP University, New Delhi)
 
Web forms and html lecture Number 4
Mudasir Syed
 
Html forms
nobel mujuji
 
Designing web pages html forms and input
Jesus Obenita Jr.
 
CSS_Forms.pdf
gunjansingh599205
 
HTML Forms: The HTML element represents a document section containing interac...
BINJAD1
 
Chapter09
Sreenivasan G
 
Html forms
Abhishek Kesharwani
 
Html Xhtml And Xml 3e Tutorial 6
larsonsb
 
Html forms
eShikshak
 
HTML-Forms
Ahmed Saihood
 
Html 4
pavishkumarsingh
 
Html 4
pavishkumarsingh
 
html 5 new form attribute
Priyanka Rasal
 
unit2_HTML_Forms fundamentals of html and crore concepts.pptx
22247019
 
Html forms
Er. Nawaraj Bhandari
 
Web(chap2)
Jafar Nesargi
 
HTML
Emertxe Information Technologies Pvt Ltd
 
HTML - FORMS.pptx
Nyssakotian
 
Ad

More from Jaya Kumari (20)

PPTX
Python data type
Jaya Kumari
 
PPTX
Introduction to python
Jaya Kumari
 
PPTX
Variables in python
Jaya Kumari
 
PPTX
Basic syntax supported by python
Jaya Kumari
 
PPTX
Oops
Jaya Kumari
 
PPTX
Inheritance
Jaya Kumari
 
PPTX
Overloading
Jaya Kumari
 
PPTX
Decision statements
Jaya Kumari
 
PPTX
Loop control statements
Jaya Kumari
 
PPTX
Looping statements
Jaya Kumari
 
PPTX
Operators used in vb.net
Jaya Kumari
 
PPTX
Variable and constants in Vb.NET
Jaya Kumari
 
PPTX
Keywords, identifiers and data type of vb.net
Jaya Kumari
 
PPTX
Introduction to vb.net
Jaya Kumari
 
PPTX
Frame class library and namespace
Jaya Kumari
 
PPTX
Introduction to .net
Jaya Kumari
 
PPTX
Jsp basic
Jaya Kumari
 
PPTX
Java script Basic
Jaya Kumari
 
PPTX
Sgml and xml
Jaya Kumari
 
PPTX
Java script Advance
Jaya Kumari
 
Python data type
Jaya Kumari
 
Introduction to python
Jaya Kumari
 
Variables in python
Jaya Kumari
 
Basic syntax supported by python
Jaya Kumari
 
Oops
Jaya Kumari
 
Inheritance
Jaya Kumari
 
Overloading
Jaya Kumari
 
Decision statements
Jaya Kumari
 
Loop control statements
Jaya Kumari
 
Looping statements
Jaya Kumari
 
Operators used in vb.net
Jaya Kumari
 
Variable and constants in Vb.NET
Jaya Kumari
 
Keywords, identifiers and data type of vb.net
Jaya Kumari
 
Introduction to vb.net
Jaya Kumari
 
Frame class library and namespace
Jaya Kumari
 
Introduction to .net
Jaya Kumari
 
Jsp basic
Jaya Kumari
 
Java script Basic
Jaya Kumari
 
Sgml and xml
Jaya Kumari
 
Java script Advance
Jaya Kumari
 

Recently uploaded (20)

PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PPTX
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
PDF
AI-Cloud-Business-Management-Platforms-The-Key-to-Efficiency-Growth.pdf
Artjoker Software Development Company
 
PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PDF
Doc9.....................................
SofiaCollazos
 
PPTX
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
PPTX
The Future of AI & Machine Learning.pptx
pritsen4700
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PDF
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PPTX
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
PDF
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
AI-Cloud-Business-Management-Platforms-The-Key-to-Efficiency-Growth.pdf
Artjoker Software Development Company
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
Doc9.....................................
SofiaCollazos
 
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
The Future of AI & Machine Learning.pptx
pritsen4700
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 

Html form

  • 1. Internet & Web Designing BCA -302
  • 2. 2 HTML Form Forms add the ability to web pages to not only provide the person viewing the document with dynamic information but also to obtain information from the person viewing it, and process the information. Objectives: Upon completing this section, you should be able to 1. Create a FORM. 2. Add elements to a FORM. 3. Define CGI (Common Gateway Interface). 4. Describe the purpose of a CGI Application. 5. Specify an action for the FORM.  Forms work in all browsers.  Forms are Platform Independent
  • 3. 3 HTML Form  A form in HTML is contained within a form element. i.e. <form>…<</form>.  A form is made up of fields as well as the markup necessary to structure the form and potentially control its presentation.  Form fields include text fields, password fields, multiple-line text fields, pop-up menus, scrolled lists, radio buttons, check boxes, and buttons.  The form itself contains regular text, other HTML elements such as tables, and form elements such as check boxes, drop-down menus, and text fields.  In order to make the form work, you must specify two things in the <form> tag: the address of the program that will handle the form contents using action and the method by which the form data will be passed using the method attribute.
  • 4. 4 HTML Form To insert a form we use the <FORM></FORM> tags. The rest of the form elements must be inserted in between the form tags. <HTML> <HEAD> <TITLE> Sample Form</TITLE> </HEAD> <BODY BGCOLOR=“FFFFFF”> <FORM ACTION = http://www.xnu.com/formtest.asp> <P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P> <P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P> </FORM> </BODY> </HTML>
  • 5. 5 HTML Form Attributes ACTION: is the URL of the CGI (Common Gateway Interface) program that is going to accept the data from the form, process it, and send a response back to the browser. METHOD: GET (default) or POST specifies which HTTP method will be used to send the form’s contents to the web server. The CGI application should be written to accept the data from either method. NAME: is a form name used by VBScript or JavaScripts. TARGET: is the target frame where the response page will show up.
  • 6. 6 HTML Form ElementsText Fields Single-line text entry fields are specified using the input element and are useful for collecting small bits of data such as a user's name, address, e-mail address, and so on. It is possible to specify a multiple-line text field using the textarea element. To set a text entry control, <input> tag is used. <input type="text" name="UserName" id="UserName" size="30" maxlength="60“ value="Enter your name here”> Attributes Name /Id: All form elements should be named by setting the name attribute to some unique value. Size: By default, unless specified this field generally will be a width of 20 characters. The value of the size field for an <input> tag is the number of characters to be displayed. It is possible for the user to type more characters than this value. The text will just scroll by. Maxlength: If you want to limit the size of the field, you need to set the value of the maxlength attribute to the maximum number of characters allowed in the field. Value: The final attribute that is useful to set with a text entry field is the value attribute. With this attribute, you can specify the default text you want to appear in the field when the form is first loaded.
  • 7. 7 HTML Form Elements Password Fields  The password form field is the same as the simple text entry field, except that the input to the field is not echoed when typed. To set a password form control, use the <input> tag again but this time set the type attribute equal to password.  As with the text field, it is possible to specify the size of the field in characters with size and the maximum entry in characters with maxlength.  Setting a default value for the password field with the value attribute doesn't make much sense because the user can see it by viewing the HTML source of the document.  Of course, the name and id attributes should also be used on this form field.  <input type="password" name="Pass" id="Pass" size="10" maxlength="10“ >
  • 8. 8 Example of Password Field <HTML><HEAD> <TITLE>Form_Password_Type</TITLE></HEAD> <BODY> <h1> <font color=red>To Access, Please enter:</font></h1> <FORM name="fome2" Action="url" method="get"> User Name: <INPUT TYPE="TEXT" Name="FName“ SIZE="15“ MAXLENGTH="25"> <BR> Password: <INPUT TYPE="PASSWORD" NAME="PWord" value="“ SIZE="15” MAXLENGTH="25"><BR> </FORM></BODY> </HTML>
  • 9. 9 HTML Form Elements Multiple-Line Text Input When it is necessary to enter more than one line of text in a form field, the input element must be abandoned in favor of the textarea element. Like the text input field, there are similar attributes to control the display size of the data entry area as well as the default value and the name of the control. Attributes Rows: To set the number of rows in the text entry area, set the rows attribute equal to the number of rows desired. Cols: To set the number of characters per line, set the cols attribute. <textarea rows="5" cols="80" name="CommentBox" id="CommentBox"> </textarea> Because there can be many lines of text within a <textarea> tag, it is not possible to set the default text for the area using the value attribute. Instead, place the default text between the <textarea> and </textarea> tags: <textarea rows="5" cols="80" name="CommentBox" id="CommentBox"> Please fill in your comments here. </textarea> The information enclosed within a <textarea> tag must be plain text and should not include any HTML markup. In fact, the default text in a <textarea> tag preserves all the spaces, returns, and other special characters. Markup included within the form control will not be interpreted.
  • 10. 10 HTML Form Elements Drop-Down Menus A drop-down menu enables the user to select one choice out of many possible choices. One nice aspect of drop- down menus is that all choices do not have to be seen on the screen and are generally are hidden. To create a drop-down menu <select> tag is used. The tag should contain one or more occurrences of the option element. Each <option> tag specifies a menu choice. Like all form fields the select element has name and id attributes used to set a unique name for the field. It is also possible to set the size attribute on a <select> tag, but generally this is not set unless the menu is a scrolled list. The option element has a few attributes as well. An occurrence of the attribute selected in an <option> tag sets the form control to select this item by default. Otherwise, a browser will choose the first <option> within the select element as the default. If multiple selected attributes are specified, the result is generally to select the final <option> tag with a selected attribute. Generally, the value submitted when the form is sent is the value enclosed by the option element. However, it is possible to set the value attribute for the element that will be returned instead. <form > <select name="GadgetType" id="GadgetType"> <option>Super Gadget</option> <option value="MEG-G5">Mega Gadget</option> <option value="MO-45" selected="selected">Mongo Gadget</option> <option>Plain Gadget</option> </select> </form>
  • 11. 11 HTML Form Elements Check Box With the scrolled list, it is possible to select many items out of a large group of items. Unfortunately, not all the items are presented at once for the user to choose. If there are a few options to select from that are not mutually exclusive, it probably is better to use a group of check boxes that the user can check off. Check boxes are best used to toggle choices on and off. Although it is possible to have multiple numbers of check boxes and let the user select as many as he or she wants. To create a check box, use an <input> tag and set the type attribute equal to checkbox. The check box also should be named by setting the name and id attributes. If the check box is selected, a value of Cheese=on will be transmitted to the server. Setting a value for the check box might make more sense. Values to be transmitted instead of the default value can be set with the value attribute. The code Cheese: <input type="checkbox" name="Extras“ value="Cheese“ > would send a response such as Extras=Cheese to the server. It is possible to set a check box to be selected by default by using the checked attribute within an <input> tag. <form> Super-magneto: <input type="checkbox" name="mag" value="Magnetize" > <br> Kryptonite Coating: <input type="checkbox" name="krypto" value="Anti-Superman" checked="checked" > <br /> Anti-gravity: <input type="checkbox" name="antigrav" value="Anti-gravity" > <br> </form>
  • 12. 12 HTML Form Elements Radio Button :  Radio buttons use a similar notation to check boxes, but only one option may be chosen among many.  This is an especially good option for choices that don't make sense when selected together.  In this sense, radio buttons are like pull-down menus that allow only one choice.  The main difference is that all options are shown at once with radio buttons.  Like check boxes, this form field uses the standard <input type=""> format. In this case, set type equal to radio.  Setting the name attribute is very important in the case of radio buttons because it groups together controls that share the radio functionality.  The radio functionality says that when an item is selected, it deselects the previously pressed item. If the names are not the same, the radio group will not work.  Be careful when naming radio fields.  When working with radio buttons, the value attribute must also be carefully considered. It is important to set each individual radio button to a different value entry. Otherwise, it will be impossible to decipher which button was selected.  Like check boxes, the occurrence of the selected attribute in an <input> tag will preselect the item. Only one item may be selected as a default out of a radio group.  If the selected attribute does not occur, the browser typically will not display any items as selected. <form> Groovy Green: <input type="radio" name="Color" value="Green"> Rocket Red: <input type="radio" name="Color" value="Red" checked="checked"> Yipee! Yellow: <input type="radio" name="Color" value="Yellow"> </form>
  • 13. 13 HTML Form Elements Reset and Submit Button Once a form has been filled in, there must be a way to send it on its way, whether it is submitted to a program for processing or simply mailed to an e-mail address.  The input element has two values, reset and submit, for the type attribute for accomplishing this.  Setting the type attribute for an <input> tag to reset creates a button that allows the user to clear or set to default all the form fields at once.  Setting the type attribute for <input> to submit creates a button that triggers the browser to send the contents of the form to the address specified in the action attribute of the enclosing form element.  The buttons have two important attributes: value and name. The value attribute sets both the value of the button transmitted to the server and the text wording on the button.  The name value associates an identifier with the form field for submission. Ofcourse, id can be used as well for setting a name, but it is typically more related to style sheets. Because the Submit and Reset buttons cause an action, either form submission or field reset, it may not be obvious why the name field can be useful.  Although having multiple Reset buttons might not be so useful, multiple Submit buttons are useful because the value of the button is sent to the address specified in the form element's action attribute. <input type="submit" value="Place Order" name="Add“ > <input type="submit" value="Delete Order" name="Delete”> <input type="submit" value="Update Order" name="Update”> <input type="reset" value="Reset Form" name="ResetButton”>
  • 14. 14 HTML Form Elements <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1“ > <strong>Customer Name:</strong> <input type="text" name="UserName“ size="25" maxlength="35“ > <br> <strong>Password:</strong> <input type="password" name="Pass" id="Pass" size="10" maxlength="10" > <br> <strong>Gadget Type:</strong> <select name="GadgetType" id="GadgetType"> <option value="SG-01">Super Gadget</option> <option value="MEG-G5">Mega Gadget</option> <option value="MO-45">Mongo Gadget</option> <option selected="selected">Gadget</option> </select> <br ><br > <input type="submit" value="Order Gadget" > <input type="reset" value="Reset Form" > </form>
  • 15. 15 HTML Form Elements File Upload: You can use a file upload to allow surfers to upload files to your web server. <INPUT TYPE=“FILE”> Browser will display File Upload has the following attributes: TYPE: file. SIZE: is the size of the text box in characters. NAME: is the name of the variable to be sent to the CGI application. MAXLENGHT: is the maximum size of the input in the textbox in characters. <BODY bgcolor=lightblue> <form> <H3><font color=forestgreen> Please attach your file here to for uploading to My <font color =red>SERVER...<BR> <INPUT TYPE="File" name="myFile" size="30"> <INPUT TYPE="Submit" value="SubmitFile"> </form> </BODY>
  • 16. 16 Summary of HTML Form Elements
  • 17. 17 HTML Form Action Attribute The action Attribute How a form is to be handled is set using the action attribute for the form element. The action attribute usually is set to a URL of the program on the web server that will process the form data captured and being sent back. The server side program that processes this data can be written in any scripting language that the web server understands. For example, the code <form action="http://www.democompany.com/cgi-bin/post-query.pl" method="post"> would be for a script called post-query.pl in the cgi-bin directory on the server www.democompany.com. It is also possible to use a relative URL for the action attribute if the form is delivered by the same server that houses the form-handling program: <form action="../cgi-bin/post-query.pl" method="post">
  • 18. 18 HTML Form Method Attribute  It is also necessary to specify how the form will be submitted to the address specified by the action attribute.  How data will be submitted is handled by the method attribute.  There are two acceptable values for the method attribute: 1) get 2) post  These are the HTTP methods that a browser uses to "talk" to a server.  If the method attribute remains unspecified, it defaults to the get method.
  • 19. 19 HTML Form get() Method • The HTTP get method generally is the default method for browsers to submit information. • In fact, HTML documents generally are retrieved by requesting a single URL from a Web server using the get method, which is part of the HTTP protocol. When you type a URL such as http://www.democompany.com/staff/thomas.html into your Web browser, it is translated into a valid HTTP get request like this: GET /staff/thomas.html HTTP/1.1 • This request is then sent to the server www.democompany.com. What this request says, essentially, is "Get me the file thomas.html in the staff directory. I am speaking the 1.1 dialect of HTTP." • We need to pass the form data along with the name of the program to run. To do this, all the information from the form is appended onto the end of the URL being requested. This produces a very long URL with the actual data in it, as shown here: http://www.democompany.com/cgi- bin/comments.exe?Name=Matthew+Foley&Age=32&Sex=male
  • 20. 20 HTML Form get() Method Disadvantages: The get method isn't very secure because the data input appears in the URL. Furthermore, there is a limitation to just how much data can be passed with the get method (1024 bytes). Advantage: • First, get is easy to deal with. An example URL like the previous one should make it obvious that the Name field is set to Matthew Foley, the Age is 32, and the Sex is male. The individual form field values are separated by ampersands. Other reason to use get is that it comes in the form of a URL, so it can be bookmarked or set as a link. • The get method is used properly in search engines. When a user submits a query to a search engine, the engine runs the query and then returns page upon page of results. It is possible to bookmark the query results and rerun the query later.
  • 21. 21 HTML Form post() Method  In situations where a large amount of information must be passed back, the post method is more appropriate than get.  The post method transmits all form input information as a data stream immediately after the requested URL.  In other words, once the server has received a request from a form using post, it knows to continue "listening" for the rest of the information.  The get method comes with the data to use right in the URL request. The encoding of the form data is handled in the same general way as the get method by default; spaces become plus signs and other characters are encoded in the URL fashion. A sample form might send data that would look like the following: Name=Jane+Smith&Age=30&Sex=female  The benefit of using the post method is that a large amount of data can be submitted this way because the form contents are not in the URL.  In the post example, the encoding of the form data is the same as get, although it is possible to change the encoding method using the enctype attribute.  One potential downside of the post method is that pages generated by data submitted via post cannot be bookmarked.