Scribd Logo
Upload

Welcome to Scribd!

  • Untitled

    Uploaded by

    xcv
    2 views5 pages
    The document discusses various HTML form elements including: - Text input, labels, and submit buttons - The name attribute which is required to submit input values - Fieldset and legend elements to group related form fields - Select dropdowns with options and a preselected default - Textarea for multi-line input - Buttons, datalist for autocompletion, and output to display calculated values

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various HTML form elements including: - Text input, labels, and submit buttons - The name attribute which is required to submit input values - Fieldset and legend elements to group related form fields - Select dropdowns with options and a preselected default - Textarea for multi-line input - Buttons, datalist for autocompletion, and output to display calculated values

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views5 pages

    Untitled

    Uploaded by

    xcv
    The document discusses various HTML form elements including: - Text input, labels, and submit buttons - The name attribute which is required to submit input values - Fieldset and legend elements to group related form fields - Select dropdowns with options and a preselected default - Textarea for multi-line input - Buttons, datalist for autocompletion, and output to display calculated values

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    <!

    DOCTYPE html>

    <html>

    <body>

    <h2>HTML Forms</h2>

    <form action="/action_page.php">

    <label for="fname">First name:</label><br>

    <input type="text" id="fname" name="fname" value="John"><br>

    <label for="lname">Last name:</label><br>

    <input type="text" id="lname" name="lname" value="Doe"><br><br>

    <input type="submit" value="Submit">

    </form>

    <p>If you click the "Submit" button, the form-data will be sent to a page called
    "/action_page.php".</p>

    <h2>The name Attribute</h2>

    <form action="/action_page.php">

    <label for="fname">First name:</label><br>

    <input type="text" id="fname" value="John"><br><br>

    <input type="submit" value="Submit">

    </form>

    <p>If you click the "Submit" button, the form-data will be sent to a page called
    "/action_page.php".</p>

    <p>Notice that the value of the "First name" field will not be submitted, because the input element
    does not have a name attribute.</p>

    <h2>Grouping Form Data with Fieldset</h2>


    <p>The fieldset element is used to group related data in a form, and the legend element defines a
    caption for the fieldset element.</p>

    <form action="/action_page.php">

    <fieldset>

    <legend>Personalia:</legend>

    <label for="fname">First name:</label><br>

    <input type="text" id="fname" name="fname" value="John"><br>

    <label for="lname">Last name:</label><br>

    <input type="text" id="lname" name="lname" value="Doe"><br><br>

    <input type="submit" value="Submit">

    </fieldset>

    </form>

    </body>

    </html>

    <!DOCTYPE html>

    <html>

    <body>

    <h2>The select Element</h2>

    <p>The select element defines a drop-down list:</p>

    <form action="/action_page.php">

    <label for="cars">Choose a car:</label>

    <select id="cars" name="cars">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat">Fiat</option>

    <option value="audi">Audi</option>
    </select>

    <input type="submit">

    </form>

    <h2>Pre-selected Option</h2>

    <p>You can preselect an option with the selected attribute:</p>

    <form action="/action_page.php">

    <label for="cars">Choose a car:</label>

    <select id="cars" name="cars">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat" selected>Fiat</option>

    <option value="audi">Audi</option>

    </select>

    <input type="submit">

    </form>

    <h2>Textarea</h2>

    <p>The textarea element defines a multi-line input field.</p>

    <form action="/action_page.php">

    <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

    <br><br>

    <input type="submit">

    </form>

    <h2>The button Element</h2>

    <button type="button" onclick="alert('Hello World!')">Click Me!</button>

    <h2>The datalist Element</h2>


    <p>The datalist element specifies a list of pre-defined options for an input element.</p>

    <form action="/action_page.php">

    <input list="browsers" name="browser">

    <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

    </datalist>

    <input type="submit">

    </form>

    <p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

    <h2>The output Element</h2>

    <p>The output element represents the result of a calculation.</p>

    <form action="/action_page.php"

    oninput="x.value=parseInt(a.value)+parseInt(b.value)">

    <input type="range" id="a" name="a" value="50">

    100 +

    <input type="number" id="b" name="b" value="50">

    <output name="x" for="a b"></output>

    <br><br>

    <input type="submit">

    </form>

    <p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>
    </body>

    </html>

    You might also like