Create an HTML form with a topic of your choosing. Using CSS to change the form

ID: 3731011 • Letter: C

Question

Create an HTML form with a topic of your choosing. Using CSS to change the form elements from their default and to improve the spacing and presentation of the form itself. The CSS code will be written in a separate file.

Your finished product will meet the following requirements:

Center the form in the webpage and include a border around it

Have 2 or more text input boxes (include label tag for each)

Include CSS styling for the focus state

Remove at least 1 border-side for 1 of the text input boxes

Include at least 2 radio buttons or 2 checkboxes (include label tag for each)

Include a text area box

Include a dropdown selection list (include label tag)

Change both the text and background color of the list

Include a submit button

Make the text over the top of the button say ‘Enter’

Make the text size larger than the default

Make sure to use margins and padding throughout the form so that there is whitespace between all text and form inputs (must use more than line breaks to space out content).

Explanation / Answer

This creates the framework of the question that is an HTML form with CSS to improve spacing and presentation.

HTML is used to define the structure of the webpage.

HTML ( filename is index.html ) :

-----------------------------------START-------------------------------------

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<form>

<h1>Personal Details</h1>

<br>

First Name <input type="text">

<br>

Last Name <input type="text">

<br>

</form>

</div>

</body>

</html>

-----------------------------------END-------------------------------------

CSS is used to style the elements which are on the webpage and improve the presentation accordingly.

CSS ( filename is style.css ):

----------------------------------START-------------------------------------

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #4BAF70;
color: white;
padding: 16px 21px;
margin: 9px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

div{
width: 25%;
}

-----------------------------------END-------------------------------------

Navigate

Create an HTML file named \"Exercise 5.html\" (or.htm). The page title must be y

Create an HTML page as shown below by writing PHP script for a simple calculator

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create an HTML form with a topic of your choosing. Using CSS to change the form

Question

Explanation / Answer

Related Questions

Navigate