Hi guys, I want to share, I'm currently learning basic / beginner level web programming, then I'm faced with a data input case using a simple HTML form tag, but there's something that's still bothering me, because there are several attributes there that are still foreign to my brain, such as:
- action
- method
- enctype
- target
- onsubmit
- onreset
- accept
- accept-charset
What are they actually used for? Please explain! Thank you.
Response
< form > is an html element tag that has the ability to create and control data input mechanisms. Some of these control tags are checkboxes, radio buttons, menus, inputs, etc.
A simple example of a boilerplate form,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiAction
It is a useful attribute to specify the server-side URL or backend address that will process the form data.
Method
It is a useful attribute to determine how data is transmitted to the HTTP protocol, whether to use GET or POST. The decision is up to you, if you are still in doubt, please read about the Differences Between PHP Global Variables $ GET, $ POST and $_REQUEST
Enctype
It is an attribute that is useful for encrypting or keeping data confidential before it is transmitted or sent. The requirement for using this attribute is that it is mandatory to use the POST global variable.
Besides security, another benefit of encryption or the art of keeping things secret is that it makes it easier for programs to handle complex data, such as uploading files to forms.
Target
Is an attribute that specifically specifies a name or keyword, indicating where the response will be displayed, after receiving the submission of information (submit). The displayed reaction can be New Tab, New Windows, or Inline Frame. **Reference: w3school.com.
Perhaps, the example of target implementation in hyperlink is more familiar to you,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiExample in the form,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiIf your website is built using Java, then this definition is more relevant to you, namely an attribute that is useful for limiting the browser's ability to do certain things. For example, displaying the results of a servlet, a JSP page, or a form submission. By default, it only displays the form and its results.
Note: Servlet is a small program written in Java that is designed to run on a web server. The word Servlet is similar to Applet. The difference is that applet runs on the client-side while Servlet runs on the server-side.
Onsubmit
Is an attribute used by javascript to report code that needs to be evaluated or reset when the form is submitted. If the expression is false, the form will not be submitted. This allows the user to recheck the inputted data to match the specified format.
Onsubmit Example,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiOnreset
It is an attribute used to clear a text field on a form, when this event is executed.
Even onreset usually collaborates with onsubmit, so if the inputted value is correct according to the specified format, then the data is sent (onsubmit), if it is wrong then the form text field is emptied (onreset) and highlighted with a different color.
Onreset example,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiAccept
It is a useful attribute to determine the type of file to be sent to the server (the concept is like the upload process).
Note: The accept attribute can only be used with the < input type="file"> element.
Tip: Do not use this attribute as a validation tool!
Accept Example,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiAccept-Charset
It is a useful attribute to specify the character types based on encoding standards, which are allowed to be sent to the server-side/backend.
There are 2 general character encoding standards:
- UTF-8 - Character encoding for Unicode
- ISO-8859-1 - Character encoding for the Latin alphabet
By default, the system defines it as "UNKNOWN", which means that the document is submitted as is.
Accept-Charset Example,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiButton
It is an attribute that is useful for controlling actions or running events or procedures. Inside the button element you can add text or images. This is what distinguishes the button element from the input element.
Tip: Don't forget to always specify the type attribute of the <button> element, because each browser has a different default, it is feared that your <button> element will follow the user's browser.
Example Button,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiCheckbox & Radio
It is a boolean attribute that is useful for defining the type of input elements.
As the name suggests, Check (select/tick) box, then the selection field provided is in the form of a box. While Radio is in the form of a circle.
Checkbox and Radio Example,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiSelect & Option
Is an html element tag that is useful for creating a drop-down list of choices. Meanwhile, the <option> element is used to determine the choices that need to be provided, the <option> element as a member of the <select> element, then place it in it.
Tip: The <select> element is a form control element, it is used to avoid redundancy in user data input. Simply put, we standardize the input.
Select & Option Example,
First name:
Last name:
Visit Bundet - Forum System Like Stackoverflow
First name:
Last name:
This example demonstrates how to assign an "onsubmit" event to a form element.
When you submit the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was submitted");
}
When you reset the form, a function is triggered which alerts some text.
Enter name:
function myFunction() {
alert("The form was reset");
}
First name:
Last name:
Click Me!
I have a bike
I have a car
Volvo
Saab
Opel
AudiThat's our explanation, hopefully it's useful.