The <fieldset> Tag

The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a frame around the grouped elements.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fieldset</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<form action="examples/html/fieldset_en.php" method="POST">
    <fieldset>
        <legend>Basic Web Development Package:</legend><br>
        <label for="html">HTML:</label>
        <input type="text" id="html" name="html" value="HTML"><br><br>
        
        <label for="css">CSS:</label>
        <input type="text" id="css" name="css" value="CSS"><br><br>
        
        <label for="js">JavaScript:</label>
        <input type="text" id="js" name="js" value="JavaScript"><br><br>
        
        <input type="submit" value="Submit">
    </fieldset>
</form>
</body>
</html>

RESULT

Default values in the input fields (value="HTML", value="CSS", value="JavaScript") are only displayed as initial text. When the user changes the values in any of these fields, the system will send the new entered values to the server when the form is submitted, and those values will be used. Learn more about working with PHP on my PHP page.

        

<?php
// PHP logic for form handling
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get form data
    // htmlspecialchars prevents malicious code (XSS protection)
    $html = htmlspecialchars($_POST['html']);
    $css = htmlspecialchars($_POST['css']);
    $js = htmlspecialchars($_POST['js']);

    // Output entered data
    echo "<div style='margin-top: 20px;'>";
    echo "<p>You entered: <strong>$html</strong></p>";
    echo "<p>You entered: <strong>$css</strong></p>";
    echo "<p>You entered: <strong>$js</strong></p>";
    echo "</div>";
}
?>