{"id":13929,"date":"2020-04-20T21:38:13","date_gmt":"2020-04-21T04:38:13","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=13929"},"modified":"2023-12-01T02:42:52","modified_gmt":"2023-12-01T10:42:52","slug":"html-forms","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-forms\/","title":{"rendered":"How to Create HTML Forms: A Guide"},"content":{"rendered":"\n<p><em>HTML forms collect data from users with text fields, dropdowns, checkboxes, and more.  Forms in HTML are enclosed within the <\/em><code><em>&lt;form&gt;<\/em><\/code><em> tag and use the <\/em><code><em>&lt;input&gt;<\/em><\/code><em> tag to create elements.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>HTML forms provide a way for users to interact with a website or web application. Web forms allow users to submit data that a website or server can then process and store.<\/p>\n\n\n\n<p>How do you create a form in HTML? That\u2019s the question we will answer in this tutorial.&nbsp;<\/p>\n\n\n\n<p>This tutorial will discuss, using an example, the basics of HTML forms, how to add input fields to a form, and how to use a form to send data to a server. By the end of this tutorial, you\u2019ll be an expert at creating forms in HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Forms<\/h2>\n\n\n\n<p>In HTML, <strong>forms<\/strong> are made up of one or more elements. HTML forms can include the following elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>single-line text fields<\/li>\n\n\n\n<li>text boxes<\/li>\n\n\n\n<li>dropdown boxes<\/li>\n\n\n\n<li>checkboxes<\/li>\n\n\n\n<li>buttons<\/li>\n\n\n\n<li>radio buttons<\/li>\n<\/ul>\n\n\n\n<p>These elements, aside from buttons and text boxes, use the <code>&lt;input&gt;<\/code> tag in HTML code.<\/p>\n\n\n\n<p>After a user submits a form, the form\u2019s contents can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>be sent to a server for further processing or<\/li>\n\n\n\n<li>be processed by the web browser.<\/li>\n<\/ul>\n\n\n\n<p>Before you create a form in HTML, you should think about how you will design your form. What data do you need to collect? How will you keep your form simple? The larger your form is, the less likely it is that users will fill it out.<\/p>\n\n\n\n<p>For this tutorial, we will make a form for a coffee house\u2019s website. Suppose that the Three Brothers Coffee House asked us to design a form that lets them accept customer queries through their website.&nbsp;<\/p>\n\n\n\n<p>We are tasked with creating a form that accepts four pieces of information. These are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>name<\/strong> of the user.<\/li>\n\n\n\n<li>The user\u2019s <strong>email address<\/strong>.<\/li>\n\n\n\n<li>Whether the user has ever <strong>visited<\/strong> the coffee house.<\/li>\n\n\n\n<li>The <strong>message<\/strong> the user wants to send to the coffee house.<\/li>\n<\/ul>\n\n\n\n<p>This means that our form will need to include four elements. Our form will also need one button so the user can submit their form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML <code>&lt;form&gt;<\/code> Tag<\/h2>\n\n\n\n<p>Forms in HTML are enclosed within the <code>&lt;form&gt;<\/code> tag. Here\u2019s an example of a form in HTML:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form&gt;\n\t\/\/ Elements\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p>The <code>&lt;form&gt;<\/code> tag is used to define a form in HTML. Once defined, the <code>&lt;form&gt;<\/code> tag can include form elements, such as checkboxes and single-line text fields.<\/p>\n\n\n\n<p>The form element accepts two attributes: <code>action<\/code> and <code>method<\/code>. We\u2019ll discuss these attributes later on in this tutorial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><code>&lt;input&gt;<\/code> Elements for HTML Forms<\/h2>\n\n\n\n<p>Most HTML form controls include <strong>input elements<\/strong>. These are used to collect different types of data from the user. Input elements are defined using the <code>&lt;input&gt;<\/code> tag.<\/p>\n\n\n\n<p>The way the <code>&lt;input&gt;<\/code> element appears on a website depends on the type attribute specified. For example, if an input field is a text box, it will appear differently than if it were a radio button.<\/p>\n\n\n\n<p>The syntax for the <code>&lt;input&gt;<\/code> element is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=\"type\" id=\"elementId\"&gt;<\/pre><\/div>\n\n\n\n<p>In this example, <code>&lt;input&gt;<\/code> accepts two attributes. The first attribute, called <code>type<\/code>, is the type of input the form field will accept. The <code>type<\/code> attribute can have many values, but some of the most common are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>button<\/code><\/li>\n\n\n\n<li><code>checkbox<\/code><\/li>\n\n\n\n<li><code>email<\/code><\/li>\n\n\n\n<li><code>text<\/code><\/li>\n\n\n\n<li><code>number<\/code><\/li>\n\n\n\n<li><code>radio<\/code><\/li>\n<\/ul>\n\n\n\n<p>The second attribute in our example is <code>id<\/code>. This attribute is used to uniquely identify the input element, and will be used to access the data the user has submitted by the script that we use to process the user\u2019s form inputs.<\/p>\n\n\n\n<p>Let\u2019s return to the Three Brothers Coffee House. The form we are building needs to accept four pieces of information about our user. The first two pieces of information we want to collect are the user\u2019s name and email address.<\/p>\n\n\n\n<p>We can collect these pieces of information using two <code>&lt;input&gt;<\/code> tags:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form&gt;\n\t&lt;label for=\"name\"&gt;Name:&lt;\/label&gt;&lt;br\/&gt;\n\t&lt;input type=\"text\" id=\"name\" name=\"name\"&gt;&lt;br \/&gt;&lt;br \/&gt;\n\t&lt;label for=\"email\"&gt;Email:&lt;\/label&gt;&lt;br\/&gt;\n\t&lt;input type=\"email\" id=\"email\" name=\"email\"&gt;\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the <img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"20\" class=\"wp-image-13930\" style=\"width: 20px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 20px) 100vw, 20px\" \/> button in the editor above to run the code.<\/em><\/p>\n\n\n\n<p>As you can see, we created a form that accepts two values: the user\u2019s name and the user\u2019s email address. In this example, we also used the <code>&lt;label&gt;<\/code> element. We will discuss this element soon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The <code>name<\/code> Attribute in HTML Forms<\/h2>\n\n\n\n<p>Every form element in an HTML form must have a <code>name<\/code> attribute. This attribute is used to submit the contents of a form. If you do not specify a <code>name<\/code> attribute in a form element, that element\u2019s contents will not be submitted to the server.<\/p>\n\n\n\n<p>In the above example, our \u201cName\u201d field has a <code>name<\/code> attribute with the value <code>name<\/code>, and our \u201cEmail\u201d field has a <code>name<\/code> attribute with the value <code>email<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML <code>&lt;label&gt;<\/code> Element<\/h2>\n\n\n\n<p>In our above example, we used the <code>&lt;label&gt;<\/code> element to add an <a href=\"https:\/\/careerkarma.com\/blog\/html-label\/\">HTML label<\/a> to each item in our form. The <code>&lt;label&gt;<\/code> tag lets us clearly state the purpose of a form element and what data it accepts.<\/p>\n\n\n\n<p>A <code>&lt;label&gt;<\/code> tag also allows us to define the text that the computer will read to users who utilize screen-readers. This is because the screen reader will read the label when it encounters the input field on the web page.<\/p>\n\n\n\n<p>Here\u2019s the syntax for an HTML label:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form&gt;\n\t&lt;label for=\"name\"&gt;Name:&lt;\/label&gt;&lt;br\/&gt;\n\t&lt;input type=\"text\" id=\"name\" name=\"name\"&gt;\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p>In the above example, we created a form that collects a user\u2019s name. We used a <code>&lt;label&gt;<\/code> tag to add the label <code>Name:<\/code> to the form. Notice that we also specified an attribute called <code>for<\/code> in our <code>&lt;label&gt;<\/code> element. This attribute should be equal to the <code>id<\/code> attribute used by the <code>input<\/code> element to which the label is linked, as it binds a form to its corresponding label.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Form Elements<\/h2>\n\n\n\n<p>Let\u2019s return to the Three Brothers Coffee House. At the start of this tutorial, we said that we wanted to collect four pieces of information: the user\u2019s name, their email address, whether they are a customer, and the message they want to send to the coffee house.<\/p>\n\n\n\n<p>So far, we have created two form fields: the name field and the email field. Let\u2019s discuss how we can create the rest of our form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Radio Buttons<\/h2>\n\n\n\n<p>Radio buttons are a common type of input used in HTML forms. A radio button allows a user to select one value from a limited number of choices. Often, radio buttons are used for forms that collect gender information, age ranges, or yes\/no responses.<\/p>\n\n\n\n<p>The following is the syntax for a radio button:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=\"radio\" name=\"radio_button\"&gt;<\/pre><\/div>\n\n\n\n<p>On our form, we want to ask the user whether they are a customer of the Three Brothers Coffee House. We can use a radio button to accomplish this task. Here\u2019s the code we will use to do so:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form&gt;\n  &lt;p&gt;Are you a customer of the Three Brothers Coffee House?&lt;\/p&gt;\n  &lt;input type=\"radio\" id=\"yes\" name=\"customer\" value=\"yes\"&gt;\n  &lt;label for=\"yes\"&gt;Yes&lt;\/label&gt;&lt;br \/&gt;\n  &lt;input type=\"radio\" id=\"no\" name=\"customer\" value=\"no\"&gt;\n  &lt;label for=\"no\"&gt;No&lt;\/label&gt;&lt;br \/&gt;\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> button in the editor above to run the code.<\/em><\/p>\n\n\n\n<p>Our user can then submit one of two values: <code>yes<\/code> or <code>no<\/code>.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s break down our code. First, we define a <code>&lt;form&gt;<\/code>. We then use the <code>&lt;p&gt;<\/code> tag to add some explanatory text for the user.<\/p>\n\n\n\n<p>On the next line, we create a radio button that has the value <code>yes<\/code>. Then we create a label for this button, which displays the text &#8220;Yes&#8221;. Next, we create a radio button with the value <code>no<\/code> and create a label for that button, which displays the text &#8220;No&#8221;.<\/p>\n\n\n\n<p>Notice that in our code our radio buttons have a <code>value<\/code> attribute specified. This value is the data that will be sent to the server when the user submits the form. So, if the user clicks on the &#8220;Yes&#8221; radio button, the value <code>yes<\/code> will be sent to the server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML <code>&lt;textarea&gt;<\/code> Element<\/h2>\n\n\n\n<p>We have one more input element that we want to add to our form: a text area. So far, we have collected a user\u2019s name, their email address, and whether they are a customer. Now we want to add in a form element that allows them to send a message to the coffee house.<\/p>\n\n\n\n<p>We can do so using the <code>&lt;textarea&gt;<\/code> element, like this:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form&gt;\n\t&lt;label for=\"message\"&gt;Message:&lt;\/label&gt;&lt;br \/&gt;\n\t&lt;textarea id=\"message\" name=\"message\"&gt;\n\tWhat message do you want to send to the Three Brothers Coffee \tHouse?\n\t&lt;\/textarea&gt;\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p>In our code, we start by defining a <code>label<\/code> that displays the value &#8220;Message:&#8221;.&nbsp;<\/p>\n\n\n\n<p>We then define a text area using the <code>&lt;textarea&gt;<\/code> tag. We specify two attributes for this text area:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>id<\/code><\/strong>. This is used to reference the contents of our form after the user submits their response.<\/li>\n\n\n\n<li>&nbsp;<strong><code>name<\/code><\/strong>. This is required in order for the contents of our form to be submitted.<\/li>\n<\/ol>\n\n\n\n<p>Finally, we add the message <code>What message do you want to send to the Three Brothers Coffee House?<\/code> between our opening and closing <code>&lt;textarea&gt;<\/code> tags. This is the default message that the user will see.<\/p>\n\n\n\n<p>The result of our code is as follows:<\/p>\n\n\n\n<p><em>Click the <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> button in the editor above to run the code.<\/em><\/p>\n\n\n\n<p>Now we have a text area field. Users can utilize this field to submit a message to the coffee house.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML <code>submit<\/code> Button<\/h2>\n\n\n\n<p>Now that we\u2019ve defined the contents of our form, we are ready to add a <code>submit<\/code> button. Here\u2019s the syntax for the <code>submit<\/code> button:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=\"submit\" value=\"Submit\"&gt;<\/pre><\/div>\n\n\n\n<p><code>Submit<\/code> buttons are used to submit the contents of a form to a form handler. (A form handler is usually a page on the web server that can process the contents of the form.) The <code>submit<\/code> button links to the form handler. You need to specify the form handler using the <code>&lt;form&gt;<\/code> tag\u2019s <code>action<\/code> attribute.&nbsp;<\/p>\n\n\n\n<p>Suppose we want to add a <code>submit<\/code> button to our web form for the coffee house. We can do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form action=\"\/post.php\"&gt;\n    &lt;label for=\"name\"&gt;Name:&lt;\/label&gt;\n    &lt;br\/&gt;\n    &lt;input type=\"text\" id=\"name\" name=\"name\"&gt;\n    &lt;br \/&gt;\n    &lt;br \/&gt;\n    &lt;label for=\"email\"&gt;Email:&lt;\/label&gt;\n    &lt;br \/&gt;\n    &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;\n    &lt;br \/&gt;\n    &lt;p&gt;Are you a customer of the Three Brothers Coffee House?&lt;\/p&gt;\n    &lt;input type=\"radio\" id=\"yes\" name=\"customer\" value=\"yes\"&gt;\n    &lt;label for=\"yes\"&gt;Yes&lt;\/label&gt;\n    &lt;br \/&gt;\n    &lt;input type=\"radio\" id=\"no\" name=\"customer\" value=\"no\"&gt;\n    &lt;label for=\"no\"&gt;No&lt;\/label&gt;\n    &lt;br \/&gt;&lt;br \/&gt;\n    &lt;label for=\"message\"&gt;Message:&lt;\/label&gt;&lt;br \/&gt;\n    &lt;textarea id=\"message\" name=\"message\"&gt;\n    What message do you want to send to the Three Brothers Coffee House?\n    &lt;\/textarea&gt;\n    &lt;input type=\"submit\" value=\"Submit\"&gt;\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p>As you can see, we added a submit button to our form. We also specified an <code>action<\/code> parameter in the <code>&lt;form&gt;<\/code> tag. This parameter links the form to the file that will handle its contents.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Submitting a Web Form<\/h2>\n\n\n\n<p>After you\u2019ve created a HTML form, you need to create a handler that will process the data that users submit through your form. The <code>&lt;form&gt;<\/code> element provides two attributes that are used to send form data to a server: <code>action<\/code> and <code>method<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Form <code>action<\/code> Attribute<\/h3>\n\n\n\n<p>The <code>action<\/code> attribute defines the location of the form handler code. When your form is submitted\u2014when the user clicks the <code>submit<\/code> button\u2014the data it collected will be sent to the form handler.<\/p>\n\n\n\n<p>In our above example, when the form is submitted, the data from the form is sent to the page <code>post.php<\/code>, which includes our form handler code. Here\u2019s an example of a form with the <code>action<\/code> attribute defined:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form action=\"\/post.php\"&gt;\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p>If there is no <code>action<\/code> attribute specified, the form is submitted to the current page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Form <code>method<\/code> Attribute<\/h3>\n\n\n\n<p>The <code>method<\/code> attribute states the HTTP method that should be used when a form is submitted. By default, forms use the <code>GET<\/code> method, but you can also use any other HTTP method, such as <code>POST<\/code>.<\/p>\n\n\n\n<p>Here\u2019s an example of the form <code>method<\/code> attribute in action:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form action=\"\/post.php\" method=\"POST\"&gt;\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p>When this form is submitted, the data it collected will be sent to the server using an HTTP <code>POST<\/code> method. (Alternatively, had we wanted to send a <code>GET<\/code> request, we could have specified <code>\"GET\"<\/code>, or just left it blank because <code>GET<\/code> is the default method.)<\/p>\n\n\n\n<p>In most cases, you should use the HTTP <code>POST<\/code> method to submit data. This is because the <code>GET<\/code> method makes the form data visible in the page\u2019s address field. So, had we submitted a form to post.php with a field called \u201cname\u201d that contained the value \u201cPauline\u201d, the following would have been submitted to the website:<\/p>\n\n\n\n<p><code>\/post.php?name=Pauline<\/code><\/p>\n\n\n\n<p><strong>This is an insecure method of sending data. The <code>GET<\/code> method should never be used if you are handling sensitive information.<\/strong><\/p>\n\n\n\n<iframe loading=\"lazy\" frameborder=\"0\" width=\"100%\" height=\"400px\" src=\"https:\/\/repl.it\/@careerkarma\/HTML-forms?lite=true\"><\/iframe>\n<br>\n<br>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Forms are an important feature of HTML that allow you to collect and process user data.<\/p>\n\n\n\n<p>In this tutorial, we discussed\u2014using an example\u2014the basics of forms in HTML and how you can create your first web form. Now you\u2019re ready to start designing and developing your own HTML forms like an expert!<\/p>\n","protected":false},"excerpt":{"rendered":"HTML forms collect data from users with text fields, dropdowns, checkboxes, and more. Forms in HTML are enclosed within the &lt;form&gt; tag and use the &lt;input&gt; tag to create elements. HTML forms provide a way for users to interact with a website or web application. Web forms allow users to submit data that a website&hellip;","protected":false},"author":240,"featured_media":13932,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-13929","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML Forms: A Step-by-Step Tutorial | Career Karma<\/title>\n<meta name=\"description\" content=\"HTML forms allow users to submit data to a website. On Career Karma, learn how to create your own forms in HTML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create HTML Forms: A Guide\" \/>\n<meta property=\"og:description\" content=\"HTML forms allow users to submit data to a website. On Career Karma, learn how to create your own forms in HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-21T04:38:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:42:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/html-forms.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Create HTML Forms: A Guide\",\"datePublished\":\"2020-04-21T04:38:13+00:00\",\"dateModified\":\"2023-12-01T10:42:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/\"},\"wordCount\":1870,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/html-forms.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/\",\"name\":\"HTML Forms: A Step-by-Step Tutorial | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/html-forms.jpg\",\"datePublished\":\"2020-04-21T04:38:13+00:00\",\"dateModified\":\"2023-12-01T10:42:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"HTML forms allow users to submit data to a website. On Career Karma, learn how to create your own forms in HTML.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/html-forms.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/html-forms.jpg\",\"width\":1200,\"height\":675,\"caption\":\"HTML forms\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-forms\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create HTML Forms: A Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML Forms: A Step-by-Step Tutorial | Career Karma","description":"HTML forms allow users to submit data to a website. On Career Karma, learn how to create your own forms in HTML.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/html-forms\/","og_locale":"en_US","og_type":"article","og_title":"How to Create HTML Forms: A Guide","og_description":"HTML forms allow users to submit data to a website. On Career Karma, learn how to create your own forms in HTML.","og_url":"https:\/\/careerkarma.com\/blog\/html-forms\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-21T04:38:13+00:00","article_modified_time":"2023-12-01T10:42:52+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/html-forms.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-forms\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-forms\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Create HTML Forms: A Guide","datePublished":"2020-04-21T04:38:13+00:00","dateModified":"2023-12-01T10:42:52+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-forms\/"},"wordCount":1870,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/html-forms.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-forms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-forms\/","url":"https:\/\/careerkarma.com\/blog\/html-forms\/","name":"HTML Forms: A Step-by-Step Tutorial | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-forms\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/html-forms.jpg","datePublished":"2020-04-21T04:38:13+00:00","dateModified":"2023-12-01T10:42:52+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"HTML forms allow users to submit data to a website. On Career Karma, learn how to create your own forms in HTML.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-forms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-forms\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/html-forms.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/html-forms.jpg","width":1200,"height":675,"caption":"HTML forms"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"How to Create HTML Forms: A Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/13929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=13929"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/13929\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/13932"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=13929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=13929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=13929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}