Create a Form Use a text editor to open your catalog page. Refer to the examples
ID: 3679328 • Letter: C
Question
Create a Form
Use a text editor to open your catalog page. Refer to the examples in the textbook and update the table to add new first and last columns. Put a unit price in the last column and a radio button in the first column. Because XHTML organizes tables by rows, you will have to add new <th> or <td> tags to each table row.
For the radio buttons, you may first add empty column tags to all of the rows, then create and test content for just the first row, then add content to the remaining rows last. This approach can reduce the amount of rework. The radio button is a type of <input>. Use the same name attribute on all of the buttons to show their connection. Assign something different to the value attribute of each button. Verify that you can select only one radio button at a time and validate the XHTML before you continue.
Embed the table in an XHTML form. To do so, add a <form> tag before the <table> tag and add a</form> tag after the </table> tag. This way the form is contained entirely between the <form> and</form> tags. Inside the form, add a text box (another type of <input> field) and a corresponding<label> for the user's name. Add submit and reset action buttons (they are also <input> types). Validate the XHMTL and test the form before you continue.
Apply a Style Sheet
Use a text editor to create an empty external CSS (call it style.css) and link it in the head of all three pages in your website. Now define styles in style.css for the paragraph (p), heading 1 (h1), form, and list item (li) element styles that affect a combination of the following:
font-family
font-size
color
text-align
Add a table style that specifies border-style, border-width, and border-color. Finally, create a class style .description that affects the font-style. In your catalog page, add theclass="description" attribute to each table data element that contains a description.
I do have my example code I can email if needed.
Explanation / Answer
I have created a form with html.Working code below:
Html:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" media="screen and (max-width: 1200px) and (min-width: 601px)" href="mystyle1.css" />
<link rel="stylesheet" media="screen and (max-width: 600px) and (min-width: 351px)" href="mystyle2.css" />
<link rel="stylesheet" media="screen and (max-width: 350px)" href="mystyle3.css" />
</head>
<body>
<div id="envelope">
<form action="" method="post">
<header>
<h2>Form for Project.</h2>
<p>Simple Html form.</p>
</header>
<label>Your Name</label>
<input name="name" placeholder="Ashley Peterson" type="text" width="100px;">
<label>Email Id</label>
<input name="email" placeholder="yourname@gmail.com" type="text">
<label>Contact Number</label>
<input name="contact" placeholder="123456789" type="text">
<label>Website URL</label>
<input name="website" placeholder="www.yoursite.com" type="text">
<label>Message</label>
<textarea cols="15" name="message" placeholder="Message" rows="10">
</textarea>
<input id="submit" type="submit" value="Send Message">
</form>
</div>
</body>
</html>
Css:
mystyle.css
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
/* With these codes padding and border does not increase it's width and gives intuitive style.*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
padding:0;
font-family: 'Roboto Slab', serif;
}
div#envelope{
width: 55%;
margin: 10px 30% 10px 25%;
padding:10px 0;
border: 2px solid gray;
border-radius:10px;
}
form{
width:70%;
margin:4% 15%;
}
header{
background-color: #4180C5;
text-align: center;
padding-top: 12px;
padding-bottom: 8px;
margin-top: -11px;
margin-bottom: -8px;
border-radius: 10px 10px 0 0;
color: aliceblue;
}
/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
}
input[type=submit]
{
margin-bottom: 20px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
background-color: #4180C5;
color: aliceblue;
font-size:15px;
cursor:pointer;
}
#submit:hover
{
background-color: black;
}
textarea{
width:100%;
padding: 15px;
margin-top: 10px;
border:1px solid #7ac9b7;
border-radius:5px;
margin-bottom: 20px;
resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: #4697e4;
}
mystyle1.css
div#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}
mystyle2.css
h2{
font-size:16px;
}
p{
font-size:14px;
}
label{
font-size:12px;
}
input[type=submit]{
padding:5px;
}
input[type=text]{
padding: 8px;
}
div#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}
mystyle3.css
input[type=submit]
{
padding:4px;
font-size:12px;
}
input[type=text]{
padding: 8px;
}
label{
font-size:12px;
}
h2{
font-size:15px;
}
p{
font-size:12px;
}
div#envelope{
width: 80%;
margin: 10px 30% 10px 11%;
}