{"id":13847,"date":"2020-11-05T23:56:26","date_gmt":"2020-11-06T07:56:26","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=13847"},"modified":"2023-12-01T04:03:59","modified_gmt":"2023-12-01T12:03:59","slug":"html-input","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-input\/","title":{"rendered":"HTML Input: Step-by-Step Guide"},"content":{"rendered":"\n<p><em>The HTML input tag creates an input field in which a user can insert data. Common inputs include text fields, checkboxes, radio buttons, and email fields. An input tag should be <\/em><em>label<\/em><em>led using a &lt;<\/em><em>label<\/em><em>&gt; tag.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Forms in HTML consist of a number of input elements, which are used to accept data on the <a href=\"https:\/\/careerkarma.com\/blog\/what-is-a-front-end-developer\/\">front-end of a website<\/a>. For instance, a web form could contain a checkbox input, a text input, and a radio button input with which the user can interact.<\/p>\n\n\n\n<p>The &lt;input&gt; tag is used to define an input element in an HTML form. Data submitted through an input tag can be represented in a wide range of data types. These range from text to numbers to yes\/no responses.<\/p>\n\n\n\n<p>This tutorial will discuss, with reference to examples, how to use the &lt;input&gt; tag to accept form input in a front-end website. By the end of reading this guide, you\u2019ll be a master at using the HTML &lt;input&gt; tag to accept user input.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Forms<\/h2>\n\n\n\n<p>Forms are an essential part of many websites that allow users to interact with the site. Forms allow users to submit data to a site. This data can be processed either by the client or a back-end server and database.<\/p>\n\n\n\n<p>In HTML, web forms are declared within the <a href=\"https:\/\/careerkarma.com\/blog\/html-forms\/\">&lt;form&gt; element<\/a>. Here\u2019s the syntax for the &lt;form&gt; element:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;form&gt;\n\t... Form elements ...\n&lt;\/form&gt;<\/pre><\/div>\n\n\n\n<p>Inside a &lt;form&gt; tag is where the elements inside a form are stored. Form elements can include text fields, submit buttons, radio buttons, multiline text boxes, and other types of input data accepted in HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Input<\/h2>\n\n\n\n<p>The &lt;input&gt; element defines a form field in which a visitor can submit data. &lt;input&gt; supports fields such as a date picker, a checkbox, a button, and a file uploader.<\/p>\n\n\n\n<p>The syntax for the &lt;input&gt; element is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=&quot;inputType&quot;&gt;<\/pre><\/div>\n\n\n\n<p>The &lt;input&gt; element accepts a number of attributes, but the main attribute you must specify is the type attribute. If you do not specify a type attribute, the &lt;input&gt; element will not appear on a web page. This is because the &lt;input&gt; element is empty by default.<\/p>\n\n\n\n<p>Let\u2019s walk through a few examples to demonstrate how the HTML &lt;input&gt; tag works.<\/p>\n\n\n\n<p>We have been asked to create a form for a local sandwich and salad store, Sue\u2019s Salads. This form should allow customers to submit feedback based on their experience in the store. The form we have been asked to create should accept:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The customer\u2019s name (as text)<\/li><li>A checkbox to indicate if the customer is a subscriber to the store\u2019s loyalty program (a checkbox)<\/li><li>A 1-5 rating based on the customer\u2019s experience at the store (as a number)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Input Types<\/h2>\n\n\n\n<p>The &lt;input&gt; tag accepts a range of input types. An input type is specified using the &#8220;type&#8221; attribute. Common input types include buttons, date pickers, password fields, and text fields.<\/p>\n\n\n\n<p>Here is a brief list of common form control input types used with the &lt;input&gt; tag:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>button<\/li><li>file<\/li><li>checkbox<\/li><li>password<\/li><li>number<\/li><li>radio<\/li><li>submit<\/li><li>text (text input type)<\/li><li>url<\/li><li>date (date and time picker)<\/li><li>image<\/li><li>email (email address input control)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Input Types HTML Examples<\/h2>\n\n\n\n<p>Let\u2019s create a few form fields using the &lt;input&gt; HTML tag.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text Fields<\/h3>\n\n\n\n<p>The &lt;input type=\u201dtext\u201d&gt; element is used to create a text field in HTML. Suppose we want to create a text field that asks a customer for their name. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=&quot;text&quot; placeholder=&quot;What is your name?&quot;&gt;<\/pre><\/div>\n\n\n\n<p>In our code, we have created a text field with two attributes. The type attribute is set to text, which means our form can accept text inputs. The placeholder attribute is assigned the value What is your name?.<\/p>\n\n\n\n<p>This text will appear as a placeholder value until a user starts typing text into the field.<\/p>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=&quot;text&quot; placeholder=&quot;What is your name?&quot;&gt;<\/pre><\/div>\n\n\n\n<p>As you can see, we have created a text field with the placeholder value <code>What is your name?<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Checkboxes <\/h3>\n\n\n\n<p>In HTML, checkboxes are marked up as inputs that are of type checkbox:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;input type=&quot;checkbox&quot; id=&quot;loyalty&quot; name=&quot;loyalty&quot; value=&quot;Yes&quot;&gt;\u00a0\n&lt;label for=&quot;loyalty&quot;&gt;Are you a subscriber to our loyalty program?&lt;\/label&gt;<\/pre><\/div>\n\n\n\n<p>This code creates a checkbox button that displays the text &#8220;Yes&#8221;. If the checkbox is clicked, it will be highlighted.<\/p>\n\n\n\n<p>Our checkbox has the label &#8220;Are you a subscriber to our loyalty program?&#8221; If you click on the label, the checkbox is toggled. The label input type is essential for accessibility as it ensures the reader can easily find out about the contents of a form.<\/p>\n\n\n\n<p>To learn more about HTML labels, read our guide on the <a href=\"https:\/\/careerkarma.com\/blog\/html-label\/\">HTML &lt;label&gt; tag<\/a>.<\/p>\n\n\n\n<p>Checkboxes have several attributes associated with them.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Type attribute.<\/strong> The input type needs to be set to checkbox.<\/li><li><strong>ID.<\/strong> Remember with ID\u2019s they have to be unique to your file.<\/li><li><strong>Name and value. <\/strong>The name and value are useful to have assigned so that can deal with the data that is collected after the form is submitted.<\/li><li><strong>Checked.<\/strong> The checked attribute, because it is not assigned to anything, is known as a boolean attribute. Having checked there means that it is automatically set to true. The default is false, so you only have to set it if you would like for the checkbox to be checked.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Radio Buttons<\/h3>\n\n\n\n<p>The &lt;input type=\u201dradio\u201d&gt; element is used to create a radio button in HTML. <\/p>\n\n\n\n<p>The term &#8220;radio button&#8221; comes from the car industry, oddly enough. Car stereos used to have physical buttons where only one button could only be pushed at a time. If you were to push another selection, the previous button would be deselected.&nbsp;<\/p>\n\n\n\n<p>The difference between using checkboxes and a set of radio buttons is that the radio buttons let you choose only one selection. The rest of the buttons disable after you check your selection so more than one radio button can\u2019t be selected. Checkboxes, on the other hand, can have multiple selections.&nbsp;<\/p>\n\n\n\n<p>To change checkbox inputs to radio button inputs, you have to do two things. First, change the input type to radio. Lastly, make sure the name value matches on all the radio buttons. This is what disables the rest of the buttons when one is selected.<\/p>\n\n\n\n<p>Let\u2019s say we want to create a field which asks whether a user is a subscriber to Sue\u2019s Salads\u2019 customer loyalty program. We could create the field using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;label for=&quot;yes&quot;&gt;Yes&lt;\/label&gt;\n&lt;input type=&quot;radio&quot; value=&quot;yes&quot; id=&quot;yes&quot; \/&gt;\n&lt;label for=&quot;no&quot;&gt;No&lt;\/label&gt;\n&lt;input type=&quot;radio&quot; value=&quot;no&quot; id=&quot;no&quot; \/&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;label for=&quot;yes&quot;&gt;Yes&lt;\/label&gt;\n&lt;input type=&quot;radio&quot; value=&quot;yes&quot; id=&quot;yes&quot;&gt;\n&lt;label for=&quot;no&quot;&gt;No&lt;\/label&gt;\n&lt;input type=&quot;radio&quot; value=&quot;no&quot; id=&quot;no&quot;&gt;<\/pre><\/div>\n\n\n\n<p>In our code, we created two radio buttons. The first radio button is assigned the label Yes and has the value yes. Our second radio button is assigned the label No and has the value no.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Number Fields<\/h3>\n\n\n\n<p>The &lt;input type=\u201dnumber\u201d&gt; element is used to accept numeric input in a form.<\/p>\n\n\n\n<p>Suppose we wanted to create a form that asks a customer at Sue\u2019s Salads to rate their experience at the store. Customers should give a numerical grade between 1 and 5. We could create a web form that collects this data using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;label&gt;How positive was your experience at Sue's Salads (between 1 and 5)?&lt;\/label&gt;\n&lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;5&quot; \/&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;label&gt;How positive was your experience at Sue's Salads (between 1 and 5)?&lt;\/label&gt;\n&lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;5&quot;&gt;<\/pre><\/div>\n\n\n\n<p>We created a form field that accepts any number between 1 and 5. This field can only accept numbers. If a user tries to type in any text into the field, the text will not be processed.<\/p>\n\n\n\n<p>In addition, because this form field has the number type, two small arrows appear inside the box. When the up arrow is clicked, the value in our field will be increased by 1. If the down arrow is clicked, the value in our field will decrease by 1.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The HTML &lt;input&gt; tag is used to accept user input in a form. The &lt;input&gt; tag can be used to accept numerical values, text, dates, yes\/no responses, and other types of data.<\/p>\n\n\n\n<p>This tutorial discussed, with reference to examples, how to use the HTML &lt;input&gt; tag, and the attributes available for use with the &lt;input&gt; tag. Now you\u2019re ready to start using the &lt;input&gt; tag to create form field elements like an HTML pro!<\/p>\n\n\n\n<p>If you want to learn more about HTML, check out our complete guide on <a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\">how to learn HTML<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"The HTML input tag creates an input field in which a user can insert data. Common inputs include text fields, checkboxes, radio buttons, and email fields. An input tag should be labelled using a &lt;label&gt; tag. Forms in HTML consist of a number of input elements, which are used to accept data on the front-end&hellip;","protected":false},"author":240,"featured_media":13848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-13847","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":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML Input: Step-by-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The HTML tag is used to create input fields in which a user can enter data. On Career Karma, learn how to use the tag.\" \/>\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-input\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Input: Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"The HTML tag is used to create input fields in which a user can enter data. On Career Karma, learn how to use the tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-input\/\" \/>\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-11-06T07:56:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:03:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"681\" \/>\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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"HTML Input: Step-by-Step Guide\",\"datePublished\":\"2020-11-06T07:56:26+00:00\",\"dateModified\":\"2023-12-01T12:03:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/\"},\"wordCount\":1372,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-input\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/html-input\/\",\"name\":\"HTML Input: Step-by-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg\",\"datePublished\":\"2020-11-06T07:56:26+00:00\",\"dateModified\":\"2023-12-01T12:03:59+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The HTML tag is used to create input fields in which a user can enter data. On Career Karma, learn how to use the tag.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-input\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg\",\"width\":1020,\"height\":681},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-input\/#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\":\"HTML Input: Step-by-Step 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\/#\/schema\/person\/image\/\",\"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 Input: Step-by-Step Guide | Career Karma","description":"The HTML tag is used to create input fields in which a user can enter data. On Career Karma, learn how to use the tag.","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-input\/","og_locale":"en_US","og_type":"article","og_title":"HTML Input: Step-by-Step Guide","og_description":"The HTML tag is used to create input fields in which a user can enter data. On Career Karma, learn how to use the tag.","og_url":"https:\/\/careerkarma.com\/blog\/html-input\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-11-06T07:56:26+00:00","article_modified_time":"2023-12-01T12:03:59+00:00","og_image":[{"width":1020,"height":681,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-input\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-input\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"HTML Input: Step-by-Step Guide","datePublished":"2020-11-06T07:56:26+00:00","dateModified":"2023-12-01T12:03:59+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-input\/"},"wordCount":1372,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-input\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-input\/","url":"https:\/\/careerkarma.com\/blog\/html-input\/","name":"HTML Input: Step-by-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg","datePublished":"2020-11-06T07:56:26+00:00","dateModified":"2023-12-01T12:03:59+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The HTML tag is used to create input fields in which a user can enter data. On Career Karma, learn how to use the tag.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-input\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-input\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-input\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/black-and-gray-laptop-computer-turned-on-doing-computer-1181271.jpg","width":1020,"height":681},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-input\/#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":"HTML Input: Step-by-Step 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\/#\/schema\/person\/image\/","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\/13847","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=13847"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/13847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/13848"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=13847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=13847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=13847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}