{"id":523,"date":"2025-05-19T11:11:51","date_gmt":"2025-05-19T11:11:51","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=523"},"modified":"2025-05-20T12:57:18","modified_gmt":"2025-05-20T12:57:18","slug":"forms-and-user-input","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/","title":{"rendered":"Forms and User Input"},"content":{"rendered":"

Introduction to <form> and attributes<\/h2>\n

The <form> element in HTML is used to collect user input and submit data to a server or process it with JavaScript. It\u2019s essential for creating interactive features like login pages, surveys, contact forms, and more.<\/p>\n

What is a <form>?<\/h3>\n

The <form> tag defines an HTML form and acts as a container for different types of input controls: text fields, checkboxes, radio buttons, submit buttons, etc.<\/p>\n

Basic Syntax:<\/strong><\/p>\n

<form action=”\/submit” method=”POST”><\/em>
\n<input type=”text” name=”username”><\/em>
\n<input type=”submit” value=”Submit”><\/em>
\n<\/form><\/em><\/p>\n

Common <form> Attributes<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n
Attribute<\/strong><\/th>\nDescription<\/strong><\/th>\n<\/tr>\n<\/thead>\n
action<\/td>\nURL where the form data is sent (server endpoint).<\/td>\n<\/tr>\n
method<\/td>\nHTTP method (GET or POST) used to submit the form.<\/td>\n<\/tr>\n
name<\/td>\nUsed to identify the form (especially useful in JS).<\/td>\n<\/tr>\n
target<\/td>\nSpecifies where to display the response (_self, _blank, etc.).<\/td>\n<\/tr>\n
autocomplete<\/td>\nEnables\/disables browser autofill (on or off).<\/td>\n<\/tr>\n
novalidate<\/td>\nPrevents the browser from validating form inputs before submission.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Example with Attributes:<\/strong><\/p>\n

<form action=”submit.php” method=”POST” target=”_blank” autocomplete=”on”><\/em>
\n<label for=”email”>Email:<\/label><\/em>
\n<input type=”email” id=”email” name=”email” required><\/em>
\n<input type=”submit” value=”Subscribe”><\/em>
\n<\/form><\/em><\/p>\n

    \n
  • action: Points to submit.php.<\/li>\n
  • method: Sends data using POST (hidden from URL).<\/li>\n
  • target: Opens result in a new tab.<\/li>\n
  • autocomplete: Enables autofill for inputs.<\/li>\n<\/ul>\n

    Quick Notes:<\/strong><\/p>\n

      \n
    • Use POST when sending sensitive data (like passwords).<\/li>\n
    • GET is used for search forms or bookmarks (data appears in the URL).<\/li>\n
    • Combine <form> with proper input elements and validations for robust UX.<\/li>\n<\/ul>\n

      Input types: text, email, password, radio, checkbox, etc.<\/h2>\n

      HTML\u2019s <input> element is used within <form> tags to collect various types of user input. Each type defines a specific behavior, UI, and validation rules.<\/p>\n

      1. type=”text”<\/h3>\n

      Used for single-line plain text input.<\/p>\n

      <label for=”name”>Name:<\/label><\/em>
      \n<input type=”text” id=”name” name=”name”><\/em><\/p>\n

      Accepts letters, numbers, and symbols.<\/p>\n

      2. type=”email”<\/h3>\n

      Accepts email addresses; provides basic validation for format (e.g., @ symbol).<\/p>\n

      <label for=”email”>Email:<\/label><\/em>
      \n<input type=”email” id=”email” name=”email” required><\/em><\/p>\n

      Built-in validation, helpful for user experience.<\/p>\n

      3. type=”password”<\/h3>\n

      Hides user input, used for sensitive info like passwords.<\/p>\n

      <label for=”pass”>Password:<\/label><\/em>
      \n<input type=”password” id=”pass” name=”password”><\/em><\/p>\n

      Input is masked (\u2022\u2022\u2022\u2022\u2022) by default.<\/p>\n

      4. type=”radio”<\/h3>\n

      Lets users select one option from a set.<\/p>\n

      <p>Gender:<\/p><\/em>
      \n<input type=”radio” id=”male” name=”gender” value=”male”><\/em>
      \n<label for=”male”>Male<\/label><\/em>
      \n<input type=”radio” id=”female” name=”gender” value=”female”><\/em>
      \n<label for=”female”>Female<\/label><\/em><\/p>\n

      All radios with the same name act as a group.<\/p>\n

      5. type=”checkbox”<\/h3>\n

      Used to select multiple options independently.<\/p>\n

      <p>Languages:<\/p><\/em>
      \n<input type=”checkbox” id=”python” name=”lang” value=”Python”><\/em>
      \n<label for=”python”>Python<\/label><\/em>
      \n<input type=”checkbox” id=”js” name=”lang” value=”JavaScript”><\/em>
      \n<label for=”js”>JavaScript<\/label><\/em><\/p>\n

      Each checkbox works independently.<\/p>\n

      6. type=”date”<\/h3>\n

      Allows users to pick a date from a calendar UI.<\/p>\n

      <label for=”dob”>Date of Birth:<\/label><\/em>
      \n<input type=”date” id=”dob” name=”dob”><\/em><\/p>\n

      7. type=”number”<\/h3>\n

      Restricts input to numeric values only.<\/p>\n

      <label for=”age”>Age:<\/label><\/em>
      \n<input type=”number” id=”age” name=”age” min=”0″ max=”100″><\/em><\/p>\n

      Supports min, max, and step.<\/p>\n

      8. type=”file”<\/h3>\n

      Lets users upload files.<\/p>\n

      <label for=”resume”>Upload Resume:<\/label><\/em>
      \n<input type=”file” id=”resume” name=”resume”><\/em><\/p>\n

      9. type=”range”<\/h3>\n

      Displays a slider for selecting a number within a range.<\/p>\n

      <label for=”volume”>Volume:<\/label><\/em>
      \n<input type=”range” id=”volume” name=”volume” min=”0″ max=”100″><\/em><\/p>\n

      10. type=”submit” & type=”reset”<\/h3>\n
        \n
      • submit sends the form data.<\/li>\n
      • reset clears all fields.<\/li>\n<\/ul>\n

        <input type=”submit” value=”Send”><\/em>
        \n<input type=”reset” value=”Clear”><\/em><\/p>\n

        Other Useful Input Types<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n
        Type<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
        search<\/td>\nStyled for search fields<\/td>\n<\/tr>\n
        tel<\/td>\nFor phone number inputs<\/td>\n<\/tr>\n
        url<\/td>\nValidates web addresses<\/td>\n<\/tr>\n
        color<\/td>\nColor picker<\/td>\n<\/tr>\n
        hidden<\/td>\nHidden fields (used in backend work)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        Labels, textareas, selects, buttons<\/h2>\n

        These HTML form elements are crucial for creating user-friendly, accessible, and interactive web forms. Below is a breakdown of each with examples and best practices.<\/p>\n

        1. <label> \u2013 Associating Text with Form Controls<\/h3>\n

        The <label> tag improves accessibility and usability by linking text descriptions to form inputs.<\/p>\n

        Syntax:<\/strong><\/p>\n

        <label for=”username”>Username:<\/label><\/em>
        \n<input type=”text” id=”username” name=”username”><\/em><\/p>\n

          \n
        • The for attribute must match the input\u2019s id.<\/li>\n
        • Clicking the label focuses the input.<\/li>\n<\/ul>\n

          2. <textarea> \u2013 Multi-line Text Input<\/h3>\n

          Used for collecting long-form input like messages or descriptions.<\/p>\n

          Syntax:<\/strong><\/p>\n

          <label for=”message”>Message:<\/label><br><\/em>
          \n<textarea id=”message” name=”message” rows=”5″ cols=”40″>Enter your message here…<\/textarea><\/em><\/p>\n

          Attributes:<\/strong><\/p>\n

            \n
          • rows: Number of visible text lines.<\/li>\n
          • cols: Width of the textarea.<\/li>\n
          • Can include placeholder\/default text between opening and closing tags.<\/li>\n<\/ul>\n

            3. <select> \u2013 Dropdown Menus<\/h3>\n

            Creates a dropdown list from which a user can select one or more options.<\/p>\n

            Syntax:<\/strong><\/p>\n

            <label for=”country”>Choose Country:<\/label><\/em>
            \n<select id=”country” name=”country”><\/em>
            \n<option value=”us”>USA<\/option><\/em>
            \n<option value=”ca”>Canada<\/option><\/em>
            \n<option value=”uk”>UK<\/option><\/em>
            \n<\/select><\/em><\/p>\n

            Optional Attributes:<\/strong><\/p>\n

              \n
            • multiple: Allows selection of multiple options.<\/li>\n
            • size: Number of visible options before scrolling.<\/li>\n<\/ul>\n

              4. <button> \u2013 Clickable Button<\/h3>\n

              Can be used to submit, reset, or trigger JavaScript actions.<\/p>\n

              Syntax:<\/strong><\/p>\n

              <button type=”submit”>Submit<\/button><\/em>
              \n<button type=”reset”>Clear<\/button><\/em>
              \n<button type=”button” onclick=”alert(‘Clicked!’)”>Click Me<\/button><\/em><\/p>\n

              Types:<\/strong><\/p>\n

                \n
              • submit: Submits the form.<\/li>\n
              • reset: Resets form fields to default values.<\/li>\n
              • button: Does nothing by default; used with JS.<\/li>\n<\/ul>\n

                Pro Tips:<\/strong><\/p>\n

                  \n
                • Always pair inputs with <label> for accessibility (screen readers).<\/li>\n
                • Use textarea for longer user input like feedback or posts.<\/li>\n
                • Use <select> when users must choose from predefined options.<\/li>\n
                • Use <button> for actions and interactions beyond form submission.<\/li>\n<\/ul>\n

                  Form submission methods: GET vs. POST<\/h2>\n

                  In HTML, the <form> tag uses the method attribute to define how form data is sent to a server. The two primary methods are GET and POST, and each serves different purposes with distinct characteristics.<\/p>\n

                  method=”GET”<\/h3>\n

                  Sends form data appended to the URL as query parameters.<\/p>\n

                  Example URL:<\/strong><\/p>\n

                    \n
                  • https:\/\/example.com\/search?query=python<\/li>\n<\/ul>\n

                    Use Cases:<\/strong><\/p>\n

                      \n
                    • Search forms<\/li>\n
                    • Bookmarkable or shareable results<\/li>\n
                    • Non-sensitive data<\/li>\n<\/ul>\n

                      Characteristics:<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n
                      Feature<\/th>\nGET<\/th>\n<\/tr>\n<\/thead>\n
                      Data visible in URL<\/td>\nYes<\/td>\n<\/tr>\n
                      Data length limit<\/td>\nYes (URL limit ~2000 chars)<\/td>\n<\/tr>\n
                      Caching allowed<\/td>\nYes<\/td>\n<\/tr>\n
                      Bookmarkable<\/td>\nYes<\/td>\n<\/tr>\n
                      Secure for sensitive data<\/td>\nNo<\/td>\n<\/tr>\n
                      Default form method<\/td>\nYes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                      Example:<\/strong><\/p>\n

                      <form action=”\/search” method=”GET”><\/em>
                      \n<input type=”text” name=”query”><\/em>
                      \n<input type=”submit” value=”Search”><\/em>
                      \n<\/form><\/em><\/p>\n

                      method=”POST”<\/h3>\n
                        \n
                      • Sends form data in the body of the HTTP request.<\/li>\n
                      • The URL stays clean and does not expose form values.<\/li>\n<\/ul>\n

                        Use Cases:<\/strong><\/p>\n

                          \n
                        • Login forms<\/li>\n
                        • Registration forms<\/li>\n
                        • File uploads<\/li>\n
                        • Sensitive or large data<\/li>\n<\/ul>\n

                          Characteristics:<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n
                          Feature<\/strong><\/th>\nPOST<\/strong><\/th>\n<\/tr>\n<\/thead>\n
                          Data visible in URL<\/td>\nNo<\/td>\n<\/tr>\n
                          Data length limit<\/td>\nVery high<\/td>\n<\/tr>\n
                          Caching allowed<\/td>\nNo<\/td>\n<\/tr>\n
                          Bookmarkable<\/td>\nNo<\/td>\n<\/tr>\n
                          Secure for sensitive data<\/td>\nYes (with HTTPS)<\/td>\n<\/tr>\n
                          Default method<\/td>\nNo (must specify)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                          Example:<\/strong><\/p>\n

                          <form action=”\/submit-form” method=”POST”><\/em>
                          \n<input type=”text” name=”name”><\/em>
                          \n<input type=”email” name=”email”><\/em>
                          \n<input type=”submit” value=”Submit”><\/em>
                          \n<\/form><\/em><\/p>\n

                          Summary Table:<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n
                          Feature<\/strong><\/th>\nGET<\/strong><\/th>\nPOST<\/strong><\/th>\n<\/tr>\n<\/thead>\n
                          Data in URL<\/td>\nYes<\/td>\nNo<\/td>\n<\/tr>\n
                          Use for sensitive data<\/td>\nNo<\/td>\nYes<\/td>\n<\/tr>\n
                          Bookmarkable<\/td>\nYes<\/td>\nNo<\/td>\n<\/tr>\n
                          Caching<\/td>\nYes<\/td>\nNo<\/td>\n<\/tr>\n
                          Max data size<\/td>\nLimited (URL length)<\/td>\nLarge<\/td>\n<\/tr>\n
                          Default method<\/td>\nYes<\/td>\nNo (must specify)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                          Pro Tip:<\/strong> Always use POST when handling sensitive data like passwords, personal info, or uploading files, especially when using HTTPS for secure transmission.<\/p>\n","protected":false},"excerpt":{"rendered":"

                          Introduction to <form> and attributes The <form> element in HTML is used to collect user input and submit data to a server or process it with JavaScript. It\u2019s essential for creating interactive features like login pages, surveys, contact forms, and more. What is a <form>?<\/p>\n","protected":false},"author":1,"featured_media":524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"yoast_head":"\nForms and User Input - HTML Course<\/title>\n<meta name=\"description\" content=\"Forms and user input enable structured data collection from users through interactive fields, controls, validation, and submission methods.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Forms and User Input - HTML Course\" \/>\n<meta property=\"og:description\" content=\"Forms and user input enable structured data collection from users through interactive fields, controls, validation, and submission methods.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/\" \/>\n<meta property=\"og:site_name\" content=\"BUHAVE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BeYouHave\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/naveedsafdarawan\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T11:11:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-20T12:57:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Forms-and-User-Input.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Naveed Safdar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Naveed Safdar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/\"},\"author\":{\"name\":\"Naveed Safdar\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\"},\"headline\":\"Forms and User Input\",\"datePublished\":\"2025-05-19T11:11:51+00:00\",\"dateModified\":\"2025-05-20T12:57:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/\"},\"wordCount\":1356,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Forms-and-User-Input.webp\",\"articleSection\":[\"HTML Course\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/\",\"name\":\"Forms and User Input - HTML Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Forms-and-User-Input.webp\",\"datePublished\":\"2025-05-19T11:11:51+00:00\",\"dateModified\":\"2025-05-20T12:57:18+00:00\",\"description\":\"Forms and user input enable structured data collection from users through interactive fields, controls, validation, and submission methods.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#primaryimage\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Forms-and-User-Input.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Forms-and-User-Input.webp\",\"width\":1200,\"height\":628,\"caption\":\"Forms and User Input\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/forms-and-user-input\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Courses\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Course\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/learn\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Forms and User Input\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"name\":\"BUHAVE\",\"description\":\"Courses - Learn Online for Free\",\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/buhave.com\\\/courses\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\",\"name\":\"BUHAVE\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"width\":375,\"height\":75,\"caption\":\"BUHAVE\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BeYouHave\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/buhave\",\"https:\\\/\\\/www.youtube.com\\\/@buhave\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\",\"name\":\"Naveed Safdar\",\"description\":\"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/naveedsafdar\\\/\",\"https:\\\/\\\/www.facebook.com\\\/naveedsafdarawan\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@naveedsafdar\"],\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/author\\\/naveed-safdar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Forms and User Input - HTML Course","description":"Forms and user input enable structured data collection from users through interactive fields, controls, validation, and submission methods.","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:\/\/buhave.com\/courses\/html\/forms-and-user-input\/","og_locale":"en_US","og_type":"article","og_title":"Forms and User Input - HTML Course","og_description":"Forms and user input enable structured data collection from users through interactive fields, controls, validation, and submission methods.","og_url":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/","og_site_name":"BUHAVE","article_publisher":"https:\/\/www.facebook.com\/BeYouHave\/","article_author":"https:\/\/www.facebook.com\/naveedsafdarawan\/","article_published_time":"2025-05-19T11:11:51+00:00","article_modified_time":"2025-05-20T12:57:18+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Forms-and-User-Input.webp","type":"image\/webp"}],"author":"Naveed Safdar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Naveed Safdar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#article","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/"},"author":{"name":"Naveed Safdar","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca"},"headline":"Forms and User Input","datePublished":"2025-05-19T11:11:51+00:00","dateModified":"2025-05-20T12:57:18+00:00","mainEntityOfPage":{"@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/"},"wordCount":1356,"commentCount":0,"publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"image":{"@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Forms-and-User-Input.webp","articleSection":["HTML Course"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/","url":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/","name":"Forms and User Input - HTML Course","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/#website"},"primaryImageOfPage":{"@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#primaryimage"},"image":{"@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Forms-and-User-Input.webp","datePublished":"2025-05-19T11:11:51+00:00","dateModified":"2025-05-20T12:57:18+00:00","description":"Forms and user input enable structured data collection from users through interactive fields, controls, validation, and submission methods.","breadcrumb":{"@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#primaryimage","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Forms-and-User-Input.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Forms-and-User-Input.webp","width":1200,"height":628,"caption":"Forms and User Input"},{"@type":"BreadcrumbList","@id":"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Courses","item":"https:\/\/buhave.com\/courses\/"},{"@type":"ListItem","position":2,"name":"HTML Course","item":"https:\/\/buhave.com\/courses\/learn\/html\/"},{"@type":"ListItem","position":3,"name":"Forms and User Input"}]},{"@type":"WebSite","@id":"https:\/\/buhave.com\/courses\/#website","url":"https:\/\/buhave.com\/courses\/","name":"BUHAVE","description":"Courses - Learn Online for Free","publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/buhave.com\/courses\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/buhave.com\/courses\/#organization","name":"BUHAVE","url":"https:\/\/buhave.com\/courses\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","width":375,"height":75,"caption":"BUHAVE"},"image":{"@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BeYouHave\/","https:\/\/www.linkedin.com\/company\/buhave","https:\/\/www.youtube.com\/@buhave"]},{"@type":"Person","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca","name":"Naveed Safdar","description":"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.","sameAs":["https:\/\/www.linkedin.com\/in\/naveedsafdar\/","https:\/\/www.facebook.com\/naveedsafdarawan\/","https:\/\/www.youtube.com\/@naveedsafdar"],"url":"https:\/\/buhave.com\/courses\/author\/naveed-safdar\/"}]}},"_links":{"self":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":1,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"predecessor-version":[{"id":525,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/523\/revisions\/525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media\/524"}],"wp:attachment":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}