HTML Elements (Forms)
Hey reader so, in my past few blogs we learned about the very basics of HTML and also learned a lot about how to write the HTML syntaxes, what I mean was their structure. So let’s do a quick recap at first, we learned about elements, tags, and attributes and we also learned about how an HTML document works. Moving forward, check out the following syntax structure so that we can move forward and learn about using tags.
So, what are we waiting for let’s start ……
Sorry in advance if I scare you in between
As the name goes, the form element is used to embed a form in our HTML document. Actually, the function of the form is to take some data as input and send it to the server for processing. But in order to use the form element, we have to use different types of attributes and elements.
First lets first talk about the different elements to be used —
- <input> — This tag is used to take user input data which is done using different attributes. Let’s have a look at the following —
a. Type — This attribute is used to specify which type of data has to be taken as an input. These are the following types taken —
b. value — This attribute is used to specify the initial value of the input field.
c. readonly — This attribute is used to keep the initial value fixed in the input field. The user cannot change it but the user highlights or copy it. (NOTE: the value attribute must be used with this attribute to specify the initial value that is to be fixed, if you don’t mention the initial value then this field will be just an empty non-editable field).
d. disabled — This attribute is used to disable an input field that it is non-clickable and not usable as well.
e. size — This attribute is used to mention the size of the input field. (NOTE: The default value for size is 20. The size attribute works with the following input types: text, search, tel, URL, email, and password.)
f. maxlength — This attribute is used to mention the maximum number of characters that can be taken as an input. (NOTE: This attribute works with the following input types: text, search, tel, URL, email, and password.)
g. minlength — This attribute is used to mention the minimum number of characters that can be taken as an input. (NOTE: This attribute works with the following input types: text, search, tel, URL, email, and password.)
h. max — This attribute is used to mention the maximum values for an input field. (NOTE: This attribute works with the following input types: number, range, date, DateTime-local, month, time, and week.)
i. min — This attribute is used to mention the minimum values for an input field. (NOTE: This attribute works with the following input types: number, range, date, DateTime-local, month, time, and week.)
j. multiple — The input multiple attribute specifies that the user is allowed to enter more than one value in an input field. (NOTE: This attribute works with the following input types: email, and file.)
k. pattern — The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).
l. required — The input required attribute specifies that an input field must be filled out before submitting the form.
m. step — The input step attribute specifies the legal number intervals for an input field.
n. autofocus — The input autofocus attribute specifies that an input field should automatically get focus when the page loads.
o. height and width — The input height and width attributes specify the height and width of an <input type=”image”> element.
p. list — The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
2. <label> — This tag is used to give a label/the name to the input field, like what is to be mentioned in respect of this input field. (NOTE: When used together with the <label> element, the for attribute specifies which form element a label is bound to.)
3. <select> — The <select> element defines a drop-down list.
4. <option> — The <option> elements defines an option that can be selected.(NOTE: By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option).
5. <textarea> — The <textarea> element defines a multi-line input field (a text area).(NOTE: The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area.)
6. <button> — The <button> element defines a clickable button.
7. <fieldset> — The <fieldset> element is used to group related data in a form.
8. <legend> — The <legend> element defines a caption for the <fieldset> element.
9. <optgroup> — This element is used to group options under the option element.
Now, let’s talk in detail about the attributes used along the <form> element —
- action — The action attribute defines the action to be performed when the form is submitted. (NOTE: Usually, the form data is sent to a file on the server when the user clicks on the submit button.)
- target — The target attribute specifies where to display the response that is received after submitting the form. The target attribute can have one of the following values -
2. method — The method attribute specifies the HTTP method to be used when submitting the form data. The form-data can be sent as URL variables (with method=”get”) or as HTTP post transaction (with method=”post”).
When method = “get”
When method = “post”
3. autocomplete — The autocomplete attribute specifies whether a form should have to autocomplete on or off. When autocomplete is on, the browser automatically completes values based on values that the user has entered before.
4. novalidate — When present, it specifies that the form-data (input) should not be validated when submitted.
So, that’s it I know it was a pretty short blog but trust me I covered most of it that are required for you to know about forms in HTML. My upcoming blogs will cover more such topics which I am pretty sure will trigger your knowledge a lot. Also, pardon but I think soon enough I will be starting writing blogs on DSA topics too, though not sure about it, let’s see what the future holds for me oops sorry us.
Thank you for reading and happy coding !!!
