Form Structure and Validation

Form Structure - Structure describes how the information in the text is organized.

Form validation -

Form Structure

<form> Tag:

The <form> tag serves as the container for form elements and defines the structure of the form.

 <form action="/submit_form" method="post">
    <!-- Form elements go here -->
</form>

⇒ Attributes:

  • action: Specifies the URL to which the form data will be submitted.
  • method: Defines the HTTP method (e.g., GET or POST) used to submit the form data.

⇒ Input Fields:

Various input fields like text inputs, password inputs, email inputs, etc., are included within the form using the <input> tag.

Attributes:

  • type: Specifies the type of input field (e.g., text, password, email).
  • id: Provides a unique identifier for the input field.
  • name: Assigns a name to the input field for form submission.

⇒ Textarea:

For multiline text input, the <textarea> tag is used within the form. It allows users to input longer text passages.

Attributes:

  • rows: Defines the visible number of rows in the textarea.
  • cols: Specifies the visible width of the textarea in characters.

⇒ Dropdown Menus:

Dropdown menus, created using the <select> tag along with <option> tags, provide users with a list of options to choose from.

⇒ Elements:

  • <option>: Specifies the options within the dropdown menu.

⇒ Buttons:

Buttons like submit, reset, or custom buttons can be added using the <button> tag within the form.

Attributes:

  • type: Specifies the type of button (e.g., submit, reset, button).

Form Validation

Required Fields:

Use the required attribute with input fields to make certain fields mandatory.

Example:

⇒ Data Types:

Specify the type of data expected in input fields using attributes like type="email", type="number", etc.

⇒ Min/Max Length:

Set minimum and maximum character limits for input fields using attributes like minlength and maxlength.

⇒ Pattern Matching:

Utilize the pattern attribute with a regular expression to validate input based on specific patterns (e.g., phone numbers, postal codes).

⇒ Client-Side Validation:

JavaScript can be used to perform client-side validation for more complex validation requirements.

⇒ Server-Side Validation:

Always perform server-side validation to ensure data integrity and security.

⇒ Error Handling:

Display clear error messages next to input fields to inform users about invalid input and guide them in correcting errors.

Small Projects using form tags 

            <!DOCTYPE html>
<html>
<head>
    <title>form</title>
</head>
<body>
    <h1>form in html</h1>
    <form>
        <div class="examples-section">
            <div class="rsp-example-title">
                <span>Form Example</span>
                <button><span class="code-copy-btn" title="Copy the Code" onclick="copyCode(this, 'code1')"><i class="fa-regular fa-clipboard"></i> Copy</span></button>
            </div><br>
            <span>Enter your Name: </span> <input type="text" id="name" name="name" placeholder="Enter your Name">
            <br><br>
            <span>Enter your Gmail:</span>
            <input type="email" id="email" name="email" placeholder="Enter your email">
            <br><br>
            <span>Enter your Password:</span>
            <input type="password" id="password" name="password" placeholder="password">
            <br><br>
            <span>Enter your Phone NO:</span>
            <input type="number" id="phone" name="phone" placeholder="Phone Number "><br>
            <br>
            <label for="gender">Gender: </label>
            <input type="radio" id="male" name="gender" value="male"/> Male
            <input type="radio" id="female" name="gender" value="female"/> Female<br>
            <br>
            <span>Which programming language should you know?</span>
            <select id="programming-language" name="programming-language">
                <option value="C">C Language</option>
                <option value="C++">C++</option>
                <option value="#C">#C</option>
                <option value="Java" selected>Java</option>
                <option value="Python">Python</option>
            </select><br>
            <p>Which is your favorite subject?</p>
            <input type="checkbox" id="maths" name="maths" value="on"/> Maths<br>
            <input type="checkbox" id="physics" name="physics" value="on"/> Physics<br>
            <input type="checkbox" id="chemistry" name="chemistry" value="on"/> Chemistry<br>
            <input type="checkbox" id="english" name="english" value="on"/> English<br>
            <input type="checkbox" id="telugu" name="telugu" value="on"/> Telugu<br>
            <p>Upload image</p>
            <input type="file" id="fileupload" name="fileupload" accept="image/">
            <br><br>
            <button>ok</button>
            <input type="submit" value="submit"><br>
            <hr>
        </div>
    </form>
</body>
</html>
Try On Editor