Web Development Book PDF

FORM ELEMENTS FORMS Forms allow users to input data that can be sent to a server, which can be processed to store information or authenticate users. The FORM ELEMENT is a container which holds all the input elements. It has two main attributes: “action” - Specifies the UR...

FORM ELEMENTS FORMS Forms allow users to input data that can be sent to a server, which can be processed to store information or authenticate users. The FORM ELEMENT is a container which holds all the input elements. It has two main attributes: “action” - Specifies the URL where the data is sent to “method” - Determines the HTTP method to use (either “post” or “get”)... Input elements go here... LLL An HTTP METHOD tells the server what kind of action to perform with the data submitted. Think of it as the “verb” in a sentence that describes the interaction. The most common HTTP methods are: “GET” - Retrieves data from the server “POST” - Create new resources (e.g. user signup) “PUT” - Updates existing data on the server, replacing the current content with new data “PATCH” - Partially updates existing data on the server, modifying only specified fields “DELETE” - Removes data from the server “OPTIONS” - Asks the server which HTTP methods are supported for a specific resource INPUT ELEMENT The INPUT ELEMENT is the essential building block for user input in a form. This empty element can capture a wide variety of data (e.g. plain text, passwords, email) depending on the “type” attribute. The browser will show a text input field for typing: Try it out! RRR  TYPE displays text Try all out! email [email protected] password ************ number 420 url https://youtube.com tel 123-45-789 date 25.10.2024 datetime-local 25.10.2024 12:47 month November 2024 week Week 44, 2024 color file Select a file None selected reset Reset form submit Submit form LLL If we want to have a Default value , we could set the “value” attribute: When you load your website you will see the input box already filled out with the default value: Default value The PLACEHOLDER ATTRIBUTE provides a hint or example inside the input box, showing users what to enter. This text disappears when users start typing. It removes the need for labels, which you'll learn about on the next page. Enter your name We can also make use of the DISABLED ATTRIBUTE to prevent users from interacting with that field: Remember, boolean attributes do not need a value! RRR VALIDATING INPUT ELEMENTS When creating forms, it’s essential to ensure that users provide the required and valid information. The REQUIRED ATTRIBUTE is a simple way to make certain fields mandatory. When you add this attribute to an input element, the browser will prevent the form from being submitted unless the field is filled out. The MINLENGTH AND MAXLENGTH ATTRIBUTES allow you to set limits on the number of characters that users can enter into a text field. Username 2024 - St Moritz, Switzerland. RRR DETAILS The DETAILS ELEMENT specifies additional details that the user can open and close on demand. The SUMMARY ELEMENT is used along with to specify a visible heading for the details. About Mount Everest Mount Everest is the tallest mountain on Earth About Mount Everest Click to show / hide text. Text is hidden by Mount Everest is the default. tallest mountain on Earth. LLL  OTHER HTML ELEMENTS HTML ENTITIES HTML entities let you display special characters that might otherwise be interpreted as code, or which may not appear correctly across all browsers. Entity names look like this: &entity_name; Commonly used entities:   non-breaking space which is a space that will not break into a new line (Two words separated by a non- breaking space will stick together) < less than sign () & ampersand (&) " double quotation mark (“) ' single quotation mark (‘) £ Pound (£) RRR  € Euro (€) © Copyright (©) ® Trademark (®) FOR EXAMPLE, let’s make use of the Copyright entity and embed it in our we created in the last section: © 2024 Quokka Empire. All rights reserved.... LLL HTML COMMENTS The COMMENT TAG is used to insert comments in the source code. Comments are not displayed in the browsers. They help explain your (large) code, making it easier to understand or debug later. There is no exclamation mark at the end! This is a paragraph This is a paragraph. RRR EMBEDDING OTHER WEBSITES The INLINE FRAME ELEMENT lets you embed another HTML page within your page, creating a “frame” where you can display content from another source (e.g. video, map). Watch the following video: height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ” allowfullscreen / In this example, we embed a YouTube video by setting the “src” attribute to the YouTube embed URL. (Go to a video -> Share Video -> Embed URL). We could also use the path to a html file as the source. Additionally we resized the frame and allowed the video player to activate fullscreen Watch the following video: LLL We can also embed a interactive Google Map by setting the “src” attribute to the Google Map Embed URL (Search a place -> Share -> Embed a Map) Go check out our place!... LLL