Question

In: Computer Science

Create a form using the following HTML elements at a minimum. Style the form in your...

Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form).


textarea


textbox


input type of "email"


select


radio button


checkbox


submit button


style at least three elements of your form in your stylesheet, including your submit button


Use a comment to delineate the beginning and end of the section of CSS used in for this form to explain what it is for future webmasters of your site.

Solutions

Expert Solution

HTML file :registers.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <!-- title for web page -->

        <title></title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Internal Stylesheet -->

        <style>

            /* style for body */

            body{

                background-color: aqua;

            }

            /* styles for labels */

            label{

                display: block;

                margin-top: 10px;

                font-weight: bold;

                font-size: 16px;

                font-style: italic;

            }

            /* style for button */

            input[type='submit'],input[type='reset']

            {

                color: white;

                background-color: maroon;

            }

            /* style for texbox */

            input[type='text']

            {

                border: 2px solid green;

            }

            /* style for form */

            form{

                padding: 25px;

                width: 500px;

                border: 2px solid red;

            }

        </style>

    </head>

    <body>

    <form>

        <h1>Registration Form</h1>

        <!-- label for the name -->

        <label for="name">Name </label>

        <!-- textbox for name -->

        <input type="text" id="nameTextbox" name="name"/>

        <!-- label for the address -->

        <label for="address">Address </label>

        <!-- textbox for Address -->

        <textarea id="AddressTextarea" rows="5" cols="23" name="Address"></textarea>

         <!-- label for the gender -->

         <label for="gender">Gender </label>

         <!-- radio button for gender -->

         <input type="radio" id="maleRadio" name="gender"/>Male

         <input type="radio" id="femaleRadio" name="gender"/>Female

         <!-- label for the email -->

        <label for="email">Email </label>

        <!-- input type=email -->

        <input type="email" id="emailTextbox" name="email"/>

         <!-- label for the location -->

         <label for="location">Location </label>

         <!-- select element -->

         <select id="ddlLocation" name="location">

             <option value="--Select--" readonly>--Select--</option>

             <option value="India">India</option>

             <option value="USA">USA</option>

             <option value="UK">Uk</option>

             </select>

              <!-- label for the Education -->

         <label for="education">Education </label>

         <!-- checkbox  for education -->

         <input type="checkbox" id="schoolCheckbox" name="education"/>School

         <input type="checkbox" id="secondaryCheckbox" name="education"/>Secondary

         <input type="checkbox" id="ugCheckbox" name="education"/>UG

         <input type="checkbox" id="pgCheckbox" name="education"/>PG

        <br><br>

         <!-- button to submit form -->

         <input type="submit"/>

         <!-- button to rest form -->

         <input type="reset"/>

    </form>

    </body>

</html>

==========================================

Output :

venereology answered 2 years ago
Next > < Previous

Related Solutions

Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-
Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-align: center;     }     .textdiv {        background-color: LightSlateGrey;        width: 50%;     }     .imgdiv {                      background-color: PapayaWhip;                   width: 30%;     } </style> </head> <body>     <h2>Center Me</h2>     <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>     <div class="textdiv">                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
Build a html form with the following elements. The form must be within a table structure....
Build a html form with the following elements. The form must be within a table structure. • Current date: a non-editable textbox and should be in the format as shown (e.g. 12 October 2020 Monday 05:35 PM) • Number of weeks till end of the year: a label showing the total number of weeks from now till 31st Dec 2020. (e.g. 17 days is 2 weeks and 3 days)
Build a html form (making use of CSS and Javascript) with the following elements. The form...
Build a html form (making use of CSS and Javascript) with the following elements. The form must have validations and within a table format. • Name: a text box where the content must start with 1 upper case characters and no special character (i.e. !, @, #, $, %, &, *). Number is not allowed. The text box must not be empty. • Module code: a text box where the content must start with 3 lower case alphabets and follows...
General Requirements: • You should create your programs with good programming style and form using proper...
General Requirements: • You should create your programs with good programming style and form using proper blank spaces, indentation and braces to make your code easy to read and understand; • You should create identifiers with sensible names; • You should make comments to describe your code segments where they are necessary for readers to understand what your code intends to achieve. • Logical structures and statements are properly used for specific purposes. Objectives This assignment requires you to write...
Create, test, and validate an HTML document that has a form with the following controls: a....
Create, test, and validate an HTML document that has a form with the following controls: a. A text box to collect the user's name b. Four checkboxes, one for each of the following items: i. Four 25-watt light bulbs for $2.39 ii. Eight 25-watt light bulbs for $4.29 iii. Four 25-watt long-life light bulbs for $3.95 iv. Eight 25-watt long-life light bulbs for $7.49 c. A collection of three radio buttons that are labeled as follows: i. Visa ii. Master...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps you took to add css file and _Layout. Should include the following: Folder structure Short description of what layout does You should not include the content of css or how you defined your css
Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form>...
Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form> <table style="color:white;background-color:blue;border:solid black 7px;border-radius:25px;"> <tr><th colspan="2" style="color:white;background-color:black;border:solid black 2px;outline:solid black 2px;">SQUARE PROBLEM</th></tr> <tr> <td><label>Enter side:</label></td><td> <input type="text" style="background-color:#DEDEE6;border:4px solid red;"/> </td> </tr> <tr> <td><label>Area:</label></td><td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr> <td><label>Perimeter:</label></td>   <td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr>    <td colspan="2" >    <center>    <input type="button" value="Area" style="color:white;background-color:black;border:1px solid red;"/>    <input type="button" value="Perimeter" style="color:white;background-color:black;border:1px solid white;"/>...
using PDO, MYSQL, and Html, how can i create a simple registration and login form for...
using PDO, MYSQL, and Html, how can i create a simple registration and login form for cPanel?
- Create an html form (bank form) and the PHP code with 2 accounts with options...
- Create an html form (bank form) and the PHP code with 2 accounts with options to transfer, deposit or withdraw money.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT