All the content so far has been about the user of the website consuming the content on the page. But what about when they need to provide information? This could be something like the items in a shopping cart, payment details or a feedback form. <\/p>\n\n\n\n
To do this you need to use form elements. At the top level is the <form> tag. Any form elements within this tag are considered part of the same form. When that form is submitted, all the values on those elements is sent off.<\/p>\n\n\n\n
Attributes control where a form sends the data, something is going to need to process it. The most commonly used attributes are:<\/p>\n\n\n\n
Action \u2013 The page to which the data is sent<\/li>
Method \u2013 The HTTP method used to send the data such as POST or GET<\/li><\/ul>\n\n\n\n
GET sends the data as part of the URL. If you’ve ever seen a URL like:<\/p>\n\n\n\n
It is sending two variables to the blog.php page. PHP is a commonly used programming language for web applications. The variables are: page<\/strong> with a value of “123” and command<\/strong> with a value of “edit”.<\/p>\n\n\n\n
POST sends the data in its own packet to the page so the values aren’t visible in the URL. Most forms will use POST because of this.<\/p>\n\n\n\n
The above example would send the data to a page named form_results.php using the POST method. <\/p>\n\n\n\n
The <form> can contain one or more of the following form elements:<\/p>\n\n\n\n
<button><\/li>
<input><\/li>
<label><\/li>
<select><\/li>
<option><\/li>
<textarea><\/li>
<optgroup><\/li>
<fieldset><\/li><\/ul>\n\n\n\n\n\n\n\n
Button<\/h2>\n\n\n\n
The <button> tag defines a clickable button.<\/p>\n\n\n\n
Inside a <button> element you can put text and tags like <i>, <b>, <strong>, <br>, <img>, etc.<\/p>\n\n\n\n
Always specify the type attribute for a <button> element, to tell browsers what type of button it is. This attribute can be: button, reset or submit.<\/p>\n\n\n\n
\n\n\n\n
Edit your index.html file and we’ll add the following link to the nav menu beneath the existing Home link.<\/p>\n\n\n\n
The <label> tag defines a label for several elements.<\/p>\n\n\n\n
Proper use of labels with the elements to the right will benefit:<\/p>\n\n\n\n
Screen reader users \u2013 The reader will read out load the label when the user is focused on the element<\/li>
Users who have difficulty clicking on very small regions such as checkboxes. The user can now click on the label text and it will behave as if they clicked on the form element.<\/li><\/ul>\n<\/div>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <link rel=\"stylesheet\" href=\"\/style.css\">\n <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n <meta charset=\"UTF-8\">\n <meta author=\"Your name here\">\n <title>Forms<\/title>\n <\/head>\n <body>\n <header>\n This is my website name\n <\/header>\n <nav>\n <a href=\"\/index.html\">Home<\/a>\n <a href=\"\/forms.html\">Forms<\/a>\n <\/nav>\n <main>\n <h1>Forms test page<\/h1>\n <form>\n <label for=\"full_name\">Name: <\/label>\n <input type=\"text\" name=\"full_name\" id=\"full_name\"><br>\n <button type=\"button\">Click Me<\/button>\n <\/form>\n <\/main>\n <footer>\n This is the footer.\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\n\n\n
Select and option<\/h2>\n\n\n\n
The <select> element is used to create a drop-down list.<\/p>\n\n\n\n
The <option> tag defines an option in a select list.<\/p>\n\n\n\n
The <select> element is most often used in a form, to collect user input.<\/p>\n\n\n\n
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).<\/p>\n\n\n\n
The id attribute is needed to associate the drop-down list with a label.<\/p>\n\n\n\n
The <option> tags inside the <select> element define the available options in the drop-down list.<\/p>\n\n\n\n
The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.<\/p>\n\n\n\n
Always add the <label> tag for best accessibility practices.<\/p>\n\n\n\n
You can use the selected attribute on an option to automatically select one of the options.<\/p>\n\n\n\n
\n\n\n\n
Textarea<\/h2>\n\n\n\n
The <textarea> tag defines a multi-line text input control.<\/p>\n\n\n\n
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.<\/p>\n\n\n\n
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).<\/p>\n\n\n\n
The size of a text area is specified by the cols and rows attributes (or with CSS).<\/p>\n\n\n\n
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted).<\/p>\n\n\n\n
The id attribute is needed to associate the text area with a label.<\/p>\n\n\n\n
Tip: Always add the <label> tag for best accessibility practices.<\/p>\n\n\n\n
\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <link rel=\"stylesheet\" href=\"\/style.css\">\n <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n <meta charset=\"UTF-8\">\n <meta author=\"Your name here\">\n <title>Forms<\/title>\n <\/head>\n <body>\n <header>\n This is my website name\n <\/header>\n <nav>\n <a href=\"\/index.html\">Home<\/a>\n <a href=\"\/forms.html\">Forms<\/a>\n <\/nav>\n <main>\n <h1>Forms test page<\/h1>\n <form>\n <label for=\"full_name\">Name: <\/label>\n <input type=\"text\" name=\"full_name\" id=\"full_name\"><br>\n <label for=\"salutation\">Title: <\/title>\n <select id=\"salutation\" name=\"salutation\">\n <option value=\"0\">Mr<\/option>\n <option value=\"1\">Ms<\/option>\n <option value=\"2\">Mrs<\/option>\n <option value=\"3\">Miss<\/option>\n <option value=\"4\">Dr<\/option>\n <\/select><br>\n <label for=\"comments\">Comments: <\/label>\n <textarea name=\"comments\" id=\"comments\"><\/textarea><br>\n <button type=\"button\">Click Me<\/button>\n <\/form>\n <\/main>\n <footer>\n This is the footer.\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\n\n\n
Fieldset and legend<\/h2>\n\n\n\n
The <fieldset> tag is used to group related elements in a form.<\/p>\n\n\n\n
The <fieldset> tag draws a box around the related elements.<\/p>\n\n\n\n
The <legend> tag is used to define a caption for the <fieldset> element.<\/p>\n\n\n\n
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/13132210\/html8.png\")