HTML Forms
HTML Forms can be used to collect user data, make a login form, registration form, a search form, a contact form and the likes.
The <form> element defines an HTML Form.
HTML Forms Attribute
- accept-charset : defines the character set of the form
- action : specifies the form-handler/page-handler page; usually a .php page in the server-side where the data is processed
- autocomplete : tells the browser to automatically complete Form elements.
- entype : defines the encoding of the data submitted by the form
- method : defines the HTTP method to use when submitting a form eg. GET or POST ; it is explained further below
- name, id, class : used for identifying the form; for the purpose of styling and Document Object Manipulation
- novalidate : tells the browser not to validate the form
- onSubmit : used to call a JavaScript function eg for form validation when the form is submitted
- target : defines the target of the form eg target = "_blank" , form-handler will be opened in new tab
The user will be redirected to the form-handler page specified by the action attribute where the input data is processed.
The form-handler is typically a Hypertext PreProcessor (PHP) server page that runs scripts to process input data.
Unfortunately, we are not going to teach you today how to handle forms in PHP but you can wait until we release our Learn PHP lession.
For now, we will only use the "sample-page-handler-.html" page as our form-handler and pretend as if the data submitted are processed in the server-side.
Example:
<!DOCTYPE html><html><head><title> Dynamic Image </title></head><body><form action="sample_page.html" method="GET"><input type="text" name="fullname" placeholder="Full Name" /><br /><input type="text" name="agge" placeholder="Age" /><br /><input type="text" name="favorite_food" placeholder="Favorite Food" /><br /><input type="text" name="hobby" placeholder="Hobby" /><br /><input type="submit" /></form></body></html>
Output:
Attribute method
The method attribute specifies which HTTP method to use when submitting input data to the form-handler page. It cloud either be GET or POST.
GET vs POST HTTP Methods
| GET | POST |
| In GET method, values are visible in the URL. | In POST method, values are not visible in the URL. |
| GET has a limitation on the length of the values, generally 255 characters. | POST has no limitation on the length of the values since they are submitted via the body of HTTP. |
| GET performs are better compared to POST because of the simple nature of appending the values in the URL. | It has lower performance as compared to GET method because of time spent in including POST values in the HTTP body. |
| This method supports only string data types. | This method supports different data types, such as string, numeric, binary, etc. |
| GET results can be bookmarked. | POST results cannot be bookmarked. |
| GET request is often cacheable. | The POST request is hardly cacheable. |
| GET Parameters remain in web browser history. | Parameters are not saved in web browser history. |
HTML Form Elements
HTML Form Elements are elements inside the <form> element you will learn various types of HTML Form Element including inputs, textboxes, buttons, checkboxes, dropdown lists and more in the next lessons.
Example:
<form><!--HTML Form Elements will be here--></form>
Input Elements
Input elements are the input field inside a form. There are different types of input fields and you will learn each of them in the next lesson.
Attribute name
Every form element except the "Submit" button must have its own unique name attribute unless the data will not be submitted to the form-handler because it is used as a reference to get the value of each element entered by the user.
✔️ The next lessons are all about HTML Form Elements go on and enjoy!
Post a Comment