Scribd Logo
Upload

Welcome to Scribd!

  • HTML Forms

    Uploaded by

    Kaleeswari
    10 views9 pages
    HTML forms allow users to enter data into a web page. The <form> element defines an HTML form and contains input elements like text fields, checkboxes, and radio buttons for collecting user input. The <form> tag also specifies the submission method and action URL. Common input element types include text, radio buttons, checkboxes, and submit buttons. Labels are associated with form controls using the <label> tag to aid accessibility. Form data is sent to a server-side script specified in the form's action attribute for processing when the user clicks the submit button.

    Original Description:

    Original Title

    HTML FORMS

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML forms allow users to enter data into a web page. The <form> element defines an HTML form and contains input elements like text fields, checkboxes, and radio buttons for collecting user input. The <form> tag also specifies the submission method and action URL. Common input element types include text, radio buttons, checkboxes, and submit buttons. Labels are associated with form controls using the <label> tag to aid accessibility. Form data is sent to a server-side script specified in the form's action attribute for processing when the user clicks the submit button.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views9 pages

    HTML Forms

    Uploaded by

    Kaleeswari
    HTML forms allow users to enter data into a web page. The <form> element defines an HTML form and contains input elements like text fields, checkboxes, and radio buttons for collecting user input. The <form> tag also specifies the submission method and action URL. Common input element types include text, radio buttons, checkboxes, and submit buttons. Labels are associated with form controls using the <label> tag to aid accessibility. Form data is sent to a server-side script specified in the form's action attribute for processing when the user clicks the submit button.

    Copyright:

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

    HTML FORMS:

    HTML Forms are required, when you want to collect some data from the site visitor.
    For example, during user registration you would like to collect information such as
    name, email address, credit card, etc.
    A form will take input from the site visitor and then will post it to a back-end application
    such as CGI, ASP Script or PHP script etc. The back-end application will perform
    required processing on the passed data based on defined business logic inside the
    application.
    There are various form elements available like text fields, textarea fields, drop-down
    menus, radio buttons, checkboxes, etc.
    The HTML <form> tag is used to create an HTML form and it has following syntax −
    <form action = "Script URL" method = "GET|POST">
    form elements like input, textarea etc.
    </form>

    The <form> Element


    The HTML <form> element is used to create an HTML form for user input:

    <form>
    .
    form elements
    .
    </form>

    The <form> element is a container for different types of input elements, such


    as: text fields, checkboxes, radio buttons, submit buttons, etc.

    The <input> Element


    The HTML <input> element is the most used form element.

    An <input> element can be displayed in many ways, depending on


    the type attribute.

    Here are some examples:


    Type Description

    <input type="text"> Displays a single-line text input field

    <input type="radio"> Displays a radio button (for selecting one of many choices

    <input type="checkbox"> Displays a checkbox (for selecting zero or more of many c

    <input type="submit"> Displays a submit button (for submitting the form)

    <input type="button"> Displays a clickable button

    All the different input types are covered in this chapter: HTML Input Types.

    Text Fields
    The <input type="text"> defines a single-line input field for text input.

    Example
    A form with input fields for text:

    <form>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname">
    </form>
    Program:

    <html>

    <body>

    <h2>Text input fields</h2>

    <form>

    <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">

    </form>

    <p>Note that the form itself is not visible.</p>

    <p>Also note that the default width of text input fields is 20 characters.</p>

    </body>

    </html>

    Output:

    Text input fields


    First name:
    John

    Last name:
    Doe

    Note that the form itself is not visible.

    Also note that the default width of text input fields is 20 characters.
    The <label> Element
    Notice the use of the <label> element in the example above.

    The <label> tag defines a label for many form elements.

    The <label> element is useful for screen-reader users, because the screen-


    reader will read out loud the label when the user focus on the input element.

    The <label> element also help users who have difficulty clicking on very small
    regions (such as radio buttons or checkboxes) - because when the user clicks
    the text within the <label> element, it toggles the radio button/checkbox.

    The for attribute of the <label> tag should be equal to the id attribute of


    the <input> element to bind them together.

    Radio Buttons
    The <input type="radio"> defines a radio button.

    Radio buttons let a user select ONE of a limited number of choices.

    Example
    A form with radio buttons:

    <html>

    <body>

    <h2>Radio Buttons</h2>

    <form>

    <input type="radio" id="male" name="gender" value="male">

    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">

    <label for="female">Female</label><br>

    <input type="radio" id="other" name="gender" value="other">

    <label for="other">Other</label>

    </form>

    </body>

    </html>

    Radio Buttons

     Male
     Female
     Other

    Checkboxes
    The <input type="checkbox"> defines a checkbox.

    Checkboxes let a user select ZERO or MORE options of a limited number of


    choices.

    Example
    A form with checkboxes:

    <html>

    <body>

    <h2>Checkboxes</h2>

    <p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>


    <form action="/action_page.php">

    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

    <label for="vehicle1"> I have a bike</label><br>

    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

    <label for="vehicle2"> I have a car</label><br>

    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

    <label for="vehicle3"> I have a boat</label><br><br>

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

    </form>

    </body>

    </html>

    Checkboxes
    The input type="checkbox" defines a checkbox:

     I have a bike
     I have a car
     I have a boat

    Submit

    The Submit Button


    The <input type="submit"> defines a button for submitting the form data to a
    form-handler.

    The form-handler is typically a file on the server with a script for processing
    input data.

    The form-handler is specified in the form's action attribute.


    Example
    A form with a submit button:

    <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>

    </body>

    </html>

    HTML Forms
    First name:
    John

    Last name:
    Doe
    Submit

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

    The Name Attribute for <input>


    Notice that each input field must have a name attribute to be submitted.

    If the name attribute is omitted, the value of the input field will not be sent at
    all.

    Example
    This example will not submit the value of the "First name" input field: 

    <html>

    <body>

    <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>

    </body>

    </html>
    The name Attribute
    First name:
    John

    Submit

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

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

    You might also like