#form
- 1. Forms are used to collect user data or information.
- 2. To create a form in HTML, we have to use <form>..</form> tag.
- 3. <form> tag is a container tag.
- 4. It is a block level element
- 5. Syntax:- <form> --All form content-- </form>
#Input Tag
1. Introduction
- 1. The Input tag is used to create input field and it is one of the most commonly used form elements in HTML.
- 2. The <input> tag allows the user to enter information or make selections.
- 3. The <input> tag is a non-container tag.
- 4. It is an inline level element.
- 5. Syntax:- <input> (Here, an empty input field will be created)
2. Type Attribute of <input> tag
- 1. The type attribute of the <input> tag specifies the type of input the input field can accept.
- 2. Syntax: type='value'(Here, this value can be text, email, password,etc)
- 3. type = 'text' (This creates a single-line text input field where users can enter any text.)
- 4. type = 'email' (This creates a text input field that validates the user's input to ensure that it is a valid email address.)
- 5. type = 'tel' (This creates an input field that is specifically designed for telephone numbers.)
- 6. type = 'password' (This creates a text input field where the entered text is hidden and replaced with bullets, to protect the user's password from being seen by others.)
- 7. type = 'submit' (This creates a button that allows users to submit the form to the server.)
- 8. type = 'date' (This creates a text input field that allows users to select a date from a calendar popup.)
- 9. type = 'time' (This creates a text input field that allows users to select a time from a dropdown menu or enter the time manually into the input field.')
- 10. type = 'datetime-local' (This creates a text input field that allows users to select both a date and time.)
- 11. type = 'month' (This creates a text input field that allows users to select a month and year from dropdown menus.)
- 12. type = 'week' (This creates a text input field that allows users to select a week from a dropdown menu.)
- 13. type = 'color' (This creates a color picker that allows users to select a color.)
- 14. type = 'range'(This creates a slider that allows users to select a value from a range of values.)
- 15. type = 'file' (This creates a file input field that allows users to select a file from their device.
If we want to accept multiple files then we can use 'multiple' attribute, without the 'multiple' attribute, the file input field only allows the user to select a single file.
We can also specify the types of files that the user can select in a file upload field by using 'accept' attribute
(Example:- accept='image/*'(Here, this allows the user to select only image files.), accept='application/pdf' (Here, this allows the user to select only PDF files , etc.))) - 16. type = 'reset' (This creates a reset button that allows users to reset the form to its initial state without reloading the page.)
- 17. type = 'url' (This creates an input field that is specifically designed for URLs, the input field will typically provide some form of validation and formatting for URLs.)
- 18. type = 'search' (This creates an input field that is specifically designed for search purpose.)
- 19. type ='number' ( This creates a number input field where users can enter only numerical values.The input can be controlled using the 'min' and 'max' attributes.)
- 20. type = 'checkbox' (A checkbox allows the user to select one or more options from a list of options.Each checkbox is independent of other checkboxes on the same page, and multiple checkboxes can be selected at the same time.When a checkbox is selected, the value attribute associated with it is sent to the server when the form is submitted.)
- 21. type = 'radio' (A radio button allows the user to select only one option from a list of options.When a user selects a radio button, any previously selected radio button in the same group is automatically deselected. Each radio button in a group must have the same 'name' attribute, but different 'value' attributes.)
3. Name Attribute
- 1. The Name attribute specifies the name of the input field, which is used to identify it when the form is submitted to the server.
- 2. Example:- Username:<input type='text' name='username'> (The name attribute is set to 'username', which is the name that will be sent to the server when the form is submitted.)
4. Value Attribute
- 1. The Value attribute specifies the default value for the input field.
- 2. Example:- Username:<input type='text' name='username' value='John'> (The value attribute is set to 'John', so when the page loads, the text input will display 'john' as its initial value. The user can then modify the value as needed. When the form is submitted, the value entered by the user (which may or may not be 'john') will be sent to the server.)
5. Required Attribute
- 1. The Required attribute specifies that the user must fill out the input field before submitting the form.
- 2. Example:- <input type='text' name='username' required> (The required attribute is added to the text input. This means that the user must enter a value in the input field before they can submit the form. If they try to submit the form without entering a value, the browser will display an error message indicating that the input is required.)
6. Readonly Attribute
- 1. When an input element is set as readonly, it means that the user can view the value of the input field, but cannot modify it.
- 2. The readonly attribute can be used with input types such as text, number, date, time, and others.
- 3. When an input field is read-only, its value is still submitted with the form if the user does not modify it.
- 4. Example:- <input type='text' name='Name' value='John Doe' readonly> (In this case the readonly attribute is used to display the user's name but prevent any changes to it.)
7. Disabled Attribute
- 1. When an input element is set as disabled, it means that the user cannot interact with it or submit its value.
- 2. The disabled attribute can be used with input types such as text, number, date, time, and others, as well as with buttons.
- 3. When an input field is disabled, its value is not submitted with the form, even if it has a default value set.
- 4. Example:- <input type='text' value='John Doe' disabled> (In this case the disabled attribute is used to disable the input field i.e., the user cannot interact with it or submit its value.)
8. Placeholder Attribute
- 1. The Placeholder attribute specifies a hint to the user as to what kind of input is expected in the input field.
- 2. It is usually displayed as grayed-out text within the input field.
- 3. Example:- <input type='email' name='email' placeholder='Enter your email address'> (The placeholder text 'Enter your email address' is displayed in the input field as a hint to the user about what information should be entered in that field. Once the user begins typing in the input field, the placeholder text disappears.)
9. Autofocus Attribute
- 1. The Autofocus attribute is used with the <input> field to specify that the input field should have focus when the page loads.
- 2. This means that the cursor will automatically be placed in the input field, ready for the user to begin typing.
- 3. Example:- <input type='text' autofocus> (The text input field will have focus when the page loads.)
10. Min Attribute
- 1. The Min attribute is used with number, date, time, and range input types to specify the minimum allowed value for the input.
- 2. Example, <input type='number' min='10'> (It creates a number input field that only accepts values greater than equal to 10.)
11. Max Attribute
- 1. The Max attribute is used with number, date, time, and range input types to specify the maximum allowed value for the input.
- 2. Example, <input type='number' max='50'> (It creates a number input field that only accepts values less than equal to 50.)
12. Minlength Attribute
- 1. The Minlength attribute is used to specify the minimum number of characters that can be entered into an input field.
- 2. Example, <input type='text' minlength='5'> (It creates a text input field that only accepts input greater than equal to 5 characters.)
13. Maxlength Attribute
- 1. The Maxlength attribute is used to specify the maximum number of characters that can be entered into an input field.
- 2. Example, <input type='text' maxlength='25'> (It creates a text input field that only accepts input less than equal to 25 characters.)
14. Size Attribute
- 1. The Size attribute is used with text input fields to specify the visible width of the input field.
- 2. Example, <input type='text' size='30'> (It creates a text input field that is 30 characters wide.)
#Label Tag
- 1. The Label tag is used to bind/connect the text with the input field.
- 2. Label tag is a container tag.
- 3. It is inline-level element.
- 4. The text we want to connect should be written within the label tag.
- 5. In input field we have to provide id and that same 'id' we have to pass to the 'for' attribute of label tag.
- 6. This creates a connection between the two elements, so when the user clicks on the text, the respective input field is focused.
- 7. Example:- <label for='username'>Username:</label> <input type='text' id='username' name='username'> (Here, the label tag is used to bind the text 'username:' with the text input field.So, when the user clicks on the text 'username:' the input field is focused.)
#Fieldset Tag and Legend Tag
1. Fieldset Tag
- 1. The Fieldset tag is used to group the related form controls and create a box around the group
- 2. Fieldset tag is a container tag.
- 3. It is block level elemeent.
2. Legend Tag
- 1. The Legend tag is used to provide title/caption for the fieldset.
- 2. It is a container tag
- 3. It is block level element.
3. Example
- 1. <fieldset> <legend>Personal Information</legend> Name <input type='text' name='username'> <br><br> Email: <input type='email' name='email'> <br><br> </fieldset>
- 2. In the above example, the fieldset element groups the two form controls (name and email) together, and the legend element provides a title for the group(fieldset).
#Select Tag and Option Tag
1. Select Tag
- 1. The Select tag in HTML is used to create a drop-down list or a select list, where a user can select one or more options from a list of predefined options.
- 2. The select tag is a container tag.
- 3. It is an inline level element.
- 4. To mention the options we have to use option tag.
- 5. The content we want to display as an option should be written within the option tag.
2. Option Tag
- 1. The Option tag is used with select tag to provide the list of options from which a user can choose.
- 2. The option tag is a container tag.
- 3. It is an inline level element.
- 4. The content that we want as an option should be written within the option tag.
3. Example
- 1. <select name='fruits'> <option value='apple'>Apple</option> <option value='banana'>Banana</option> <option value='orange'>Orange</option> <option value='grape'>Grape</option> </select>
- 2. In this example, the <select> tag creates a drop-down list of fruits, with the name 'fruits'. The <option> tags provide the list of fruits that a user can choose from. Each <option> tag has a value attribute that specifies the value that will be sent to the server when the form is submitted. The text between the opening and closing <option> tags is the label that will be displayed in the drop-down list as an option.
4. Disadvantage of Select Tag
- 1. The main disadvantage of the select tag is that it limits the user's input options to the predefined list of options provided by the developer using the option tags.
- 2. The user cannot enter any text of their choice or customize the options available in the list.
#DataList Tag
- 1. The Datalist Tag is introduced in Html5.
- 2. The Html datalist tag is used to provide an autocomplete feature on the form element.
- 3. Datalist tag is a container tag.
- 4. It is block level element.
- 5. It is used to provide a list of predefined options to the users.
- 6. Datalist tag is used to create suggestion list or autocomplete list.
- 7. The <datalist> tag contains a set of <option> tags that define the options in the list.
- 8. We are binding the suggestion list with the input field, for this we have to provide 'list' attribute in the input tag and 'id' attribute in the datalist tag, this same 'id' we have to provide in the 'list' attribute of input tag.
- 9. Whenever the user inputs in the input field related suggestions are displayed.
- 10. The advantage of using the datalist tag is that it allows users to enter values that are not present in the options list.
- 11. Example :- Choose a fruit <input type ='text' list ='fruits' name ='my-fruit'> <datalist id='fruits'> <option value='apple'> <option value='banana'> <option value='orange'> <option value='cherry'> <option value='grape'> <option value='pineapple'> </datalist>
- 12. In the above example, the <datalist> tag with the id of 'fruits' provides a list of fruit options for the <input> tag. When the user types into the input field, the available options are displayed in a dropdown list, and the user can select an option or continue typing a custom value.
#Textarea Tag
- 1. The Textarea tag is used to create multi-line input field where the user can enter text.
- 2. Textarea tag is a container tag.
- 3. It is block level element.
- 4. We can control the dimensions of textarea using rows ans cols attribute.
- 5. The rows and cols attributes are optional and determine the visible height and width of the text area respectively.
- 6. Syntax:- rows = 'number of rows' and cols = 'number of columns'
- 7. Whatever content we write within the textarea tag is directly displayed inside the textarea.
- 8. Example:- <textarea name='message' rows='5' cols='40'>Default text inside the field...</textarea>
- 9. In the above example, the rows attribute specifies the height of the textarea, while the cols attribute specifies the width of the textarea. The default text is specified between the opening and closing <textarea> tags.
#Button Tag
- 1. The Button tag in HTML is used to create a clickable button on a web page.
- 2. Button tag is a container tag.
- 3. It is block level element.
- 4. It is often used to trigger some sort of action, like submitting a form or performing a JavaScript function when clicked.
- 5. Example:- <button>Submit</button> (It is used to create a submit button.)
#Difference between <input type = 'submit'> and <button>Submit</button>
- 1. <input type='submit'> is a self-contained tag/non-container tag whereas <button>Submit</button> is a container tag.
- 2. When we create submit button using <input> tag then on submit it automatically tries to connect to the server, if server is present it will send the data and reload the page whereas button tag doesn't try to conect to the server and it reloads the page when clicked.
- 3. <input type = 'submit'> is not fully compatible with Javascript whereas <button>Submit</button> is fully compatible with Javascript.
- 4. We can only mention text in input tag whereas we can mention any content like text, image, etc within the button tag.