An HTML form is composed of form elements, which are different kinds of input elements, such as checkboxes, text fields, submit buttons, radio buttons, and so on.<\/p>\n\n\n\n
The\u00a0<input>\u00a0element is an essential form element, which, depending on the\u00a0type\u00a0attribute, can be displayed in different ways.<\/p>\n\n\n\n
Let\u2019s speak about some of input types.<\/p>\n\n\n\n
The <input type=\"text\"><\/kbd> specifies a one-line input field for text input.<\/p>\n\n\n\n The <input type=\"radio\"><\/kbd> specifies a radio button with the help of which you can select one of many choices.<\/p>\n\n\n\n The <input type=\"submit\"><\/kbd> submits the form data to a form-handler.<\/p>\n\n\n\n The form-handler is a server page with a script to process input data, which is defined in the action attribute of the form.<\/p>\n\n\n\n The action attribute specifies the action that should be performed when the form is submitted.<\/p>\n\n\n\n When the user the form data is sent to a web page on the server when the user clicks on the submit button.<\/p>\n\n\n\n The target attribute defines whether the form result is open in a new browser tab, frame, or in the current window.<\/p>\n\n\n\n The default value of this attribute is _self<\/kbd>. Using this value will open the form result in the current window.<\/p>\n\n\n\n The _blank<\/kbd> value will open the form result open in a new browser tab.<\/p>\n\n\n\n The method attribute defines the HTTP method (GET or POST) that will be used when submitting the form data.<\/p>\n\n\n\n GET is the default method when submitting form data, and when using this method the form data is visible in the page address field.<\/p>\n\n\n\n Don\u2019t use the GET method to send sensitive data, because it will be visible in the URL.<\/p>\n\n\n\n The GET method is useful for form submissions where a user wants to bookmark the result.<\/p>\n\n\n\n The length of a URL is limited (maximum 2048 characters).<\/p>\n\n\n\n If the form data includes sensitive or personal information, always use the POST method, as it doesn\u2019t display the submitted form data in the page address field.<\/p>\n\n\n\n As there are no size limitations while using the POST method, it can be used to send large amounts of data.<\/p>\n\n\n\n Form submissions with the POST method can\u2019t be bookmarked.<\/p>\n\n\n\n Below you can find other <form> attributes:<\/p>\n\n\n\n An HTML form is composed of form elements, which are different kinds of input elements, such as checkboxes, text fields, submit buttons, radio buttons, and so on. The HTML <input> element The\u00a0<input>\u00a0element is an essential form element, which, depending on the\u00a0type\u00a0attribute, can be displayed in different ways. Let\u2019s speak about some of input types. Text […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[325],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9333"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9333"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9333\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Example of the text input:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h2>Text Input Example<\/h2>\n <form>\n Name:<br>\n <input type=\"text\" name=\"name\">\n <br>\n Surname:<br>\n <input type=\"text\" name=\"surname\">\n <\/form>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nRadio Button Input<\/h3>\n\n\n\n
Example of the radio button input:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h2>Radio Button Example<\/h2>\n <form>\n <input type=\"radio\" name=\"game\"value=\"football\" checked> Football\n <input type=\"radio\" name=\"game\" value=\"basketball\"> Basketball\n <\/form>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nSubmit input<\/h3>\n\n\n\n
Example of the submit input:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h2>HTML Form Example<\/h2>\n <form action=\"\/form\/submit\" method=\"POST\">\n Name:<br>\n <input type=\"text\" name=\"firstname\" value=\"Tom\">\n <br>\n Surname:<br>\n <input type=\"text\" name=\"lastname\" value=\"Brown\">\n <br>\n Age:<br>\n <input type=\"text\" name=\"Age\" value=\"21\">\n <br><br>\n <input type=\"submit\" value=\"Submit\">\n <\/form>\n <p>Click the \"Submit\" button, to sent the form-data to the action page.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe Action Attribute<\/h2>\n\n\n\n
<form action=\"\/form\/submit\"><\/code><\/pre>\n\n\n\nThe Target Attribute<\/h2>\n\n\n\n
<form action=\"\/form\/submit\" target=\"_blank\"><\/code><\/pre>\n\n\n\nThe Method Attribute<\/h2>\n\n\n\n
Example of the GET method:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h2>The method Attribute With the GET Method<\/h2>\n <form action=\"\/form\/submit\" target=\"_blank\" method=\"GET\">\n Neame:<br>\n <input type=\"text\" name=\"name\" value=\"Tom\">\n <br>\n Surname:<br>\n <input type=\"text\" name=\"Surname\" value=\"Brown\">\n <br>\n Age:<br>\n <input type=\"number\" name=\"Aage\" value=\"21\">\n <br><br>\n <input type=\"submit\" value=\"Submit\">\n <\/form>\n <p> Here we used the \"_blank\" value, which will open the form result in a new browser tab.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nExample of the POST method:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <h2>The method Attribute With the Post Method<\/h2>\n <form action=\"\/form\/submit\" target=\"_blank\" method=\"POST\">\n Name:<br>\n <input type=\"text\" name=\"name\" value=\"Tom\">\n <br>\n Surname:<br>\n <input type=\"text\" name=\"surname\" value=\"Brown\">\n <br>\n Age:<br>\n <input type=\"number\" name=\"age\" value=\"21\">\n <br><br>\n <input type=\"submit\" value=\"Submit\">\n <\/form>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nWhen to use the GET Method<\/h2>\n\n\n\n
When to use the POST Method<\/h2>\n\n\n\n
Other Attributes<\/h2>\n\n\n\n
Attribute<\/th> Description<\/th><\/tr><\/thead> accept-charset<\/td> This attribute defines the charset that is used in the submitted form (default: the page charset).<\/td><\/tr> autocomplete<\/td> This attribute defines whether the browser should autocomplete the form or not (default: on).<\/td><\/tr> enctype<\/td> This attribute defines the encoding of the submitted data (default:url-encoded).<\/td><\/tr> name<\/td> This attribute defines a name that is used to identify the form.<\/td><\/tr> novalidate<\/td> This attribute defines that the browser must not validate the form.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"