HTML Tutorials

HTML - Working code for HTML Forms and Input Types

Working code for HTML Forms and Input Types using HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>
    <h1>Registration Form</h1>
    <form action="submit-your-form-handler" method="post">
        <p>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </p>
        <p>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </p>
        <p>
            <input type="submit" value="Register">
        </p>
    </form>
</body>
</html>

Explanation of the Code

The webpage begins with the declaration of <!DOCTYPE html>. Includes settings, for language, character set, and viewport in the <head> section.

Creating a Form:

  • The <form> tag specifies an action attribute to show where the form data should be sent upon submission and a method attribute set to post indicating that the form data should be part of the HTTP request body.
  • Each input element (text, email, and password) is placed within a <p> tag for formatting to ensure they display on lines.

Labels and Inputs:

  • The <label> tags use the for attribute to link each label with its corresponding form input by matching id attributes. This is crucial for accessibility as it allows screen readers to properly convey the purpose of each input field.
  • By including the required attribute on the input tags it mandates that these fields must be completed before submitting the form providing a layer of client-side validation.

To conclude there is a submit button at the end of the form that enables users to send their information once all details are filled out.

This illustration showcases a fully operational user registration form with considerations, for accessibility. You can enhance it further with CSS for design or JavaScript, for functionalities and validation if needed

logo

HTML

Beginner 5 Hours

Working code for HTML Forms and Input Types using HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>
    <h1>Registration Form</h1>
    <form action="submit-your-form-handler" method="post">
        <p>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </p>
        <p>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </p>
        <p>
            <input type="submit" value="Register">
        </p>
    </form>
</body>
</html>

Explanation of the Code

The webpage begins with the declaration of <!DOCTYPE html>. Includes settings, for language, character set, and viewport in the <head> section.

Creating a Form:

  • The <form> tag specifies an action attribute to show where the form data should be sent upon submission and a method attribute set to post indicating that the form data should be part of the HTTP request body.
  • Each input element (text, email, and password) is placed within a <p> tag for formatting to ensure they display on lines.

Labels and Inputs:

  • The <label> tags use the for attribute to link each label with its corresponding form input by matching id attributes. This is crucial for accessibility as it allows screen readers to properly convey the purpose of each input field.
  • By including the required attribute on the input tags it mandates that these fields must be completed before submitting the form providing a layer of client-side validation.

To conclude there is a submit button at the end of the form that enables users to send their information once all details are filled out.

This illustration showcases a fully operational user registration form with considerations, for accessibility. You can enhance it further with CSS for design or JavaScript, for functionalities and validation if needed

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.