Text Formatting Tags
By Saket Bhatnagar••Beginner to Intermediate
form
- 1Forms are used to collect user data or information.
- 2To create a form in HTML, we have to use <form>..</form> tag.
- 3<form> tag is a container tag.
- 4It is a block level element
- 5Syntax:- <form> --All form content-- </form>
Input Tag
Introduction
- 1The Input tag is used to create input field and it is one of the most commonly used form elements in HTML.
- 2The <input> tag allows the user to enter information or make selections.
- 3The <input> tag is a non-container tag.
- 4It is an inline level element.
- 5Syntax:- <input> (Here, an empty input field will be created)
Type Attribute of <input> tag
- 1The 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)
- 3type = 'text' (This creates a single-line text input field where users can enter any text.)
- 4type = 'email' (This creates a text input field that validates the user's input to ensure that it is a valid email address.)
- 5type = 'tel' (This creates an input field that is specifically designed for telephone numbers.)
- 6type = '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.)
- 7type = 'submit' (This creates a button that allows users to submit the form to the server.)
- 8type = 'date' (This creates a text input field that allows users to select a date from a calendar popup.)
- 9type = '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.')
- 10type = 'datetime-local' (This creates a text input field that allows users to select both a date and time.)
- 11type = 'month' (This creates a text input field that allows users to select a month and year from dropdown menus.)
- 12type = 'week' (This creates a text input field that allows users to select a week from a dropdown menu.)
- 13type = 'color' (This creates a color picker that allows users to select a color.)
- 14type = 'range'(This creates a slider that allows users to select a value from a range of values.)
- 15type = '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.))) - 16type = 'reset' (This creates a reset button that allows users to reset the form to its initial state without reloading the page.)
- 17type = '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.)
- 18type = 'search' (This creates an input field that is specifically designed for search purpose.)
- 19type ='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.)
- 20type = '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.)
- 21type = '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.)
Name Attribute
- 1The Name attribute specifies the name of the input field, which is used to identify it when the form is submitted to the server.
- 2Example:- 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.)
Value Attribute
- 1The Value attribute specifies the default value for the input field.
- 2Example:- 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.)
Required Attribute
- 1 The Required attribute specifies that the user must fill out the input field before submitting the form.
- 2Example:- <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.)
Readonly Attribute
- 1When an input element is set as readonly, it means that the user can view the value of the input field, but cannot modify it.
- 2The readonly attribute can be used with input types such as text, number, date, time, and others.
- 3When an input field is read-only, its value is still submitted with the form if the user does not modify it.
- 4Example:- <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.)
Disabled Attribute
- 1When an input element is set as disabled, it means that the user cannot interact with it or submit its value.
- 2The disabled attribute can be used with input types such as text, number, date, time, and others, as well as with buttons.
- 3When an input field is disabled, its value is not submitted with the form, even if it has a default value set.
- 4Example:- <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.)
Placeholder Attribute
- 1The Placeholder attribute specifies a hint to the user as to what kind of input is expected in the input field.
- 2It is usually displayed as grayed-out text within the input field.
- 3Example:- <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.)
Autofocus Attribute
- 1The Autofocus attribute is used with the <input> field to specify that the input field should have focus when the page loads.
- 2This means that the cursor will automatically be placed in the input field, ready for the user to begin typing.
- 3Example:- <input type='text' autofocus> (The text input field will have focus when the page loads.)
Min Attribute
- 1The Min attribute is used with number, date, time, and range input types to specify the minimum allowed value for the input.
- 2Example, <input type='number' min='10'> (It creates a number input field that only accepts values greater than equal to 10.)
Max Attribute
- 1The Max attribute is used with number, date, time, and range input types to specify the maximum allowed value for the input.
- 2Example, <input type='number' max='50'> (It creates a number input field that only accepts values less than equal to 50.)
Minlength Attribute
- 1The Minlength attribute is used to specify the minimum number of characters that can be entered into an input field.
- 2Example, <input type='text' minlength='5'> (It creates a text input field that only accepts input greater than equal to 5 characters.)
Maxlength Attribute
- 1The Maxlength attribute is used to specify the maximum number of characters that can be entered into an input field.
- 2Example, <input type='text' maxlength='25'> (It creates a text input field that only accepts input less than equal to 25 characters.)
Size Attribute
- 1The Size attribute is used with text input fields to specify the visible width of the input field.
- 2Example, <input type='text' size='30'> (It creates a text input field that is 30 characters wide.)
Label Tag
- 1The Label tag is used to bind/connect the text with the input field.
- 2Label tag is a container tag.
- 3It is inline-level element.
- 4The text we want to connect should be written within the label tag.
- 5In input field we have to provide id and that same 'id' we have to pass to the 'for' attribute of label tag.
- 6This creates a connection between the two elements, so when the user clicks on the text, the respective input field is focused.
- 7Example:- <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
Fieldset Tag
- 1The Fieldset tag is used to group the related form controls and create a box around the group
- 2Fieldset tag is a container tag.
- 3It is block level elemeent.
Legend Tag
- 1The Legend tag is used to provide title/caption for the fieldset.
- 2It is a container tag
- 3It is block level element.
Example
- 1<fieldset> <legend>Personal Information</legend> Name <input type='text' name='username'> <br><br> Email: <input type='email' name='email'> <br><br> </fieldset>
- 2In 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
Select Tag
- 1The 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.
- 2The select tag is a container tag.
- 3It is an inline level element.
- 4To mention the options we have to use option tag.
- 5The content we want to display as an option should be written within the option tag.
Option Tag
- 1The Option tag is used with select tag to provide the list of options from which a user can choose.
- 2The option tag is a container tag.
- 3It is an inline level element.
- 4The content that we want as an option should be written within the option tag.
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>
- 2In 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.
Disadvantage of Select Tag
- 1The 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.
- 2The user cannot enter any text of their choice or customize the options available in the list.
DataList Tag
- 1The Datalist Tag is introduced in Html5.
- 2The Html datalist tag is used to provide an autocomplete feature on the form element.
- 3Datalist tag is a container tag.
- 4It is block level element.
- 5It is used to provide a list of predefined options to the users.
- 6Datalist tag is used to create suggestion list or autocomplete list.
- 7The <datalist> tag contains a set of <option> tags that define the options in the list.
- 8We 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.
- 9Whenever the user inputs in the input field related suggestions are displayed.
- 10The advantage of using the datalist tag is that it allows users to enter values that are not present in the options list.
- 11Example :- 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>
- 12In 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
- 1The Textarea tag is used to create multi-line input field where the user can enter text.
- 2Textarea tag is a container tag.
- 3It is block level element.
- 4We can control the dimensions of textarea using rows ans cols attribute.
- 5The rows and cols attributes are optional and determine the visible height and width of the text area respectively.
- 6Syntax:- rows = 'number of rows' and cols = 'number of columns'
- 7Whatever content we write within the textarea tag is directly displayed inside the textarea.
- 8Example:- <textarea name='message' rows='5' cols='40'>Default text inside the field...</textarea>
- 9In 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
- 1The Button tag in HTML is used to create a clickable button on a web page.
- 2Button tag is a container tag.
- 3It is block level element.
- 4It is often used to trigger some sort of action, like submitting a form or performing a JavaScript function when clicked.
- 5Example:- <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.
- 2When 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.
- 4We can only mention text in input tag whereas we can mention any content like text, image, etc within the button tag.