HTML Form Elements PDF
Document Details
Uploaded by UncomplicatedParrot5998
Tags
Summary
This document provides examples and explanations HTML tags, like video, audio, input fields. It includes elements like form controls, input types and attributes such as controls, height, width, autoplay, and various input types.
Full Transcript
# CH-3 - HTML Form Element ## HTML5 MULTIMEDIA TAGS: - Multimedia on the Web is sound, music, videos, movies & animations. - Multimedia files have formats and different extensions like Nav, MP3, mph, mpg, .wmv, .avi. ## HTML <video> tag: - The HTML <video> tag is used for playing video contents...
# CH-3 - HTML Form Element ## HTML5 MULTIMEDIA TAGS: - Multimedia on the Web is sound, music, videos, movies & animations. - Multimedia files have formats and different extensions like Nav, MP3, mph, mpg, .wmv, .avi. ## HTML <video> tag: - The HTML <video> tag is used for playing video contents on webpage such as movie clips or other video streams. - Before HTML5 there is no standard tag. - The <video> contains one or more <source> tags with different video sources. The browser chooses first source it supports. - The text between <video> & </video> will only display if the browser doesn't support <video> tag. - There are three video formats supported for HTML video tag: 1. Mph 2. Web M 3. Ogg ## HTML Attributes of <video> tag: - **controls:** It defines the video controls which is displayed with play, pause buttons. - **height:** It is used to set the height of the video player. - **width:** It is used to set the width of the video player. - **autoplay:** Specifies video will start playing as soon as it is ready. - **src(URL):** Specifies URL of video file. - **loop:** Specifies video will start over again as it finished. - **muted:** Audio of video should muted. ## Example: ```html <body> <video width="240" height="180 controls> <source src="Movie.mp4" type="video/mp4"> <source src="Movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> ``` ## HTMl <audio> tag: - The HTML <audio> tag is used for playing sound on webpage such as music or other audio streams. - Before HTML5 there is no standard tag. - There are 3 audio formats supported for HTML audio tag: 1. MP3 2. WAV 3. Ogg. ## Example: ```html <audio controls> <source src="Koyal.mp3" type="audio/mpeg"> Your browser does not support audio element </audio> ``` | Type | File format | | --------------- | ------------ | | audio/mpeg | MP3 | | audio/ogg | ogg | | audio/wav | WAV | ## HTML Frames: - `<iframe>` inline frame. - HTML iframe is used to display webpage within a webpage. - Common use is to embed a google map into a page. ## Example: ```html <iframe src="deno.html" height="200" width="300" title = "iframe demo"></iframe> ``` ## Attributes of <iframe> - **src:** Specifies URL of page to show in frame. - **height & width:** Specifies size of iframe in pixels. ## HTML Form: - HTML forms are used to collect information from the user. - The user input is most often sent to a server for processing. - The best known form on Web is probably the search box that sits right in the middle of Google's homepage. - You see form while registering, login, feedback form. ## Introduction to Forms: - **How form works:** 1. **Fill form & submit it.** 2. **The name of form control sent to server along with entered value.** 3. **Server process information using programming language like PHP, C#, .Net, JAVA or store in database.** 4. **Server creates a new page & send back to browser like Thank You for submitting.** - HTML forms are defined using `<form>` element. ```html <body> <form>…</form> </body> ``` - **There are 3 attributes of form** 1. **action (required):** It points to webpage that will load after user submits the form. 2. **method:** Specifies HTTP method (GET or POST) 3. **name:** Specifies the name of the form. ## Get method: - With GET method, the values of form are added to the end of URL specified in action. - The length of a URL is limited (about 3000 characters). - Appends form-data into the URL in name/value pairs. - **GET used for:** - Short forms i.e. search - When you just retrieving data from webserver (not adding/deleting in database) ## Post method: - Appends form data inside the body of the HTTP request (data is not shown in URL). - Has no size limitation. - Offers better security. - **Post used for:** - Upload a file. - Very long form. - Contain sensitive information. - add/delete information from database. ## Type of `<input>`: 1. **`<input type="text">`:** - Creates a single-line text input. ```html <input type="text" name="username" id="Uname" size="15" maxlength="30"> ``` - `name` identifies form control & is sent along with the value to the server. - `size` indicates width of text input (value = "no. of characters seen") - `maxlength` limit the no. of characters. 2. **`<input type="password">`:** - Creates a textbox like text except the characters are blocked out. 3. **`<input type="radio">`:** - Allow users to pick just one of a number of options. ```html <input type="radio" name="gender" value="male" & Male <input type="radio" name="gender" value="female" & Female ``` 4. **`<input type="checkbox">`:** - Allow users to select (and unselect) one or more options in answer to a question. ```html <input type="checkbox" name="Music" value="Josavan" Jiosavan <input type="checkbox" name="Music" value="Spotify" Spotify ``` 5. **`<input type="file">`:** - Allow users to upload a file (image, video, mp3, pdf). - When using file method should be host. 6. **`<input type="submit">`:** - Used to send a form to server. ```html <input type="submit" name="subscribe" value="subscribe"> ``` - The value contains the text appear on button. 7. **Image Button:** ```html <input type="image" src="url of image" width="100" height="200"> ``` 8. **`<input type="button">`:** - Display a clickable button (use for JavaScript). 9. **`<input type="color">`:** - A color picker can show up in the input field. 10. **`<input type="date">`:** - Input fields that should contain a date. (no time) 11. **`<input type="datetime-local">`:** - Specifies a date & time input field with no time zone. 12. **`<input type="email">`:** - Input field that should contain an e-mail address. 13. **`<input type="hidden">`:** - Defines a hidden input field (not visible to the user). 14. **`<input type="month">`:** - Allows the user to select a month & year. 15. **`<input type="number">`:** - Defines a numeric input field. For example: ```html <input type="number" name="lect" min="1" max="8"> ``` 16. **`<input type="range">`:** - Defines a control for entering a number whose exact value is not important. ```html <input type="range" name="range" min="1" max="3"> ``` 17. **`<input type="reset">`:** - Defines a reset button that will reset all form values to their default values. 18. **`<input type="search">`:** - Used for search field I. A search field behaves like a regular text field. 19. **`<input type="tel">`:** - Used for input field that should contain telephone number. 20. **`<input type="time">`:** - Allows the user to select a time. 21. **`<input type="URL">`:** - Used for input field that should contain a URL address. 22. **`<input type="week">`:** - The user to select a week and year. - **Use `required` attribute to ensure mandatory field.** ```html <input type="text" name="Uname" required> ``` - **Use `placeholder` attribute to specify a short hint that describe the expected value of an input field (accepted).** ```html <input type="text" name="Uname" placeholder="Enter name"> ``` ## Introduction to Forms: ### Textarea - Used for create multiline text input. - It has open & end tag. - Text between tags appears in textbox when page loads. ```html <textarea name="address" cols="20" rows="10"> Enter your address </textarea> ``` - The `cols` attribute specifies how wide the textarea should be & `rows` indicates how many rows it take up. ### Drop down list box: - A drop-down list box (`select` box) allow users to select one option from dropdown list. - `<select>` is used to create dropdown list box and it contains 2 or more `<option>` elements . - `<option>` is are used to specify options that users can select from. The `value` attribute indicates the value sent to the server along with the name. ```html <select name = "city"> <option value = "Ahmedabad">Ahmedabad</option> <option value = "Surendranagar">Surendranagar</option> <option value = "Surat">Surat</option> </select> ``` - `<optgroup>` is used to group related options in dropdown list. ### `<label>` - `<label>` is used to define label. ```html <label> Username: </label> <input type="text" name="Uname"> ``` Or: ```html <label> Username: <input type="text" name="Uname"></label> ``` ### `fieldset` - Group related form controls together. - Browser draws box around related elements. - `<legend>` comes after `<fieldset>` and it contain caption which identifies purpose of group. ```html <fieldset> <legend>Contact details</legend> <label>Email:</label><br> <input type="email" name="email"><br> <label>Address</label> <textarea name="address"></textarea> </fieldset> ``` ## Introduction to Forms: | Tag | Description | | ----------- | ------------------------------------------------ | | `button` | Defines a clickable button | | `datalist` | Specifies a list of pre-defined options for input controls | | `output` | Used to represent result of any calculation | ## HTML Form Elements: - **`<form>`, `<input>`, `<textarea>`, `<label>`, `<fieldset>`** - **`<legend>`, `<select>`, `<option>`, `<output>`, `<button>`, `<datalist>`**
