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 1 year ago
Next > < Previous

Related Solutions

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
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.
HTML Create a page of texts that uses inline elements. The page should contain a citation,...
HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.
write php code for buying and selling web using sql, javascript ,html ,css style
write php code for buying and selling web using sql, javascript ,html ,css style
Using node.js, create the following tasks. 1. Set up a server and HTML file server as...
Using node.js, create the following tasks. 1. Set up a server and HTML file server as shown in the videos. Once you have it successfully running, make the following adjustments A. When a 404 error (file not found) occurs, display a funny message about the file missing and/or did you forget how to type? B. If the user enters a request for the home page (index.html) then: Display an index.html page you have created which includes your name, course number,...
Pensions Address the following elements in the form of a memo to your CEO: A. From...
Pensions Address the following elements in the form of a memo to your CEO: A. From AMAZON’s financial information, what type of pension plan does it have? Discuss the reasons why AMAZON has chosen this particular plan. B. What was the effect of the pension plan on AMAZON's financial statements? Defend your response. C. Your CEO has informed you—the controller of AMAZON—that the board of directors has made the decision to look at other options of types of retirement plans....
Use a style sheet to define the following rules and implement the given HTML code. Please...
Use a style sheet to define the following rules and implement the given HTML code. Please put your style information within the same file as the HTML code. Rules • Hyperlinks using the nodec class should display no decoration. • Hyperlinks should display text in white with a green background color when the mouse pointer is held over the link. (use the hover pseudo-class) • Unordered lists not nested within any other lists should be displayed in blue text and...
Write a html program that containing at least the following elements: A heading A paragraph An...
Write a html program that containing at least the following elements: A heading A paragraph An ordinary image with link An imagemap with two clickable areas/hotsppots, link one to asignment1 and link the other to any available picture. USE INSTAGRAM WITH THE LINK FOR ONE
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT