-
Adding an Image to a Web Page
-
The role of images in a webpage
-
Specifying locations in web pages
-
Customizing Links
-
Exploring link options
-
Basic links
-
Why links?
-
Submit and Reset buttons
-
Multiline text boxes
-
Drop-down list fields
-
File upload fields
-
Hidden fields
-
Checkboxes and radio buttons
-
Password fields
-
Text fields
-
Input tags
-
Creating forms
-
How a form looks like?
-
Adding Headers Cells
-
Creating a Basic Table
-
Description list
-
Unordered list
-
Ordered list
-
Lists
-
More formatting elements
-
Other text elements
-
Working with language elements
-
Abbreviations, Definitions, Quotations and Citations
-
Creating Breaks
-
Basic text formatting elements
-
Creating a page from scratch using VS Code
-
Creating a page from scratch using Notepad
-
Setting Up the Basic Document Structure
-
Parents, Children, Descendants and Siblings
-
The Outer Structure of an HTML Document
-
Element Attributes
-
HTML elements
-
How HTML creates a website
-
Creating HTML markup
-
How a website works
-
Web Browsers vs Web Servers and Internet/HTTP
-
Webpage vs Website
Creating forms
HTML forms can present information to users, using text and images. But it can also offer various types of other methods of presenting information, including the following:
- Text input fields, including in-line, single line, or multiple lines
- Data selection tools, such as radio buttons (which let you pick one option from a group)
- Pick lists, which let you fill in a value from a predefined set of options
- Check boxes, which enable you to pick zero, one, or more values from a predefined set of inputs
All in all, HTML form markup tags and attributes help you:
- Define the overall form structure.
- Tell the web browser how to handle form data.
- Create input objects, such as text fields and drop-down lists.
Every form has the same basic structure. Also, which input elements you use depends upon the data you’re presenting and collecting.
Structure of form
The <form> element is a content and input container: It works much like the paragraph (<p>) element, which contains paragraph text, or like the division (<div>) element, which contains various types of sub-elements in a logical document section. Thus, all input elements associated with a single form are
- Contained within a <form> element.
- Processed by the same form handler.
A form handler is a program on the web server (or a simple mailto: URL) that manages the data a user sends to you through the form. A web browser can only gather information through forms; it doesn’t know what to do with the information after it has grabbed it. You must provide another mechanism to actually do something useful with data you collect in any form.
Form element Attributes
You always use these two key attributes with the <form> tag:
- action: The URL for the form handler
- method: How you want form data to be sent to the form handler
Your form handler dictates which of the following values to use for ‘method’:
• get sends the form data to the form handler on the URL.
• post sends the form data in the HyperText Transfer Protocol (HTTP) header.
Markup
The markup in following code creates a form that uses the post method to send user-entered information to a form handler (guestbook.php) to be processed on the web server.https://stackblitz.com/edit/web-platform-y6lole?embed=1&file=index.html&hideExplorer=1&hideNavigation=1&view=editor
The value of the action attribute is a URL, so you can use absolute or relative URLs to point to a form handler on your server.