(First post on Stackoverflow, if there is anything im missing feel free to let me know)
What I am trying to accomplish, marked in Red
I've been working with a few things, but can't figure it out. I don't know where to look to find if that type of styling is it's own thing or is it some sort of manipulation of code?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Forms</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
div.a{
border: 2px solid black;
}
div.border{
border: 10px solid black;
padding:10px;
}
div.color{
border:15px solid #46516C;
pading: 4px;
}
p.a{
padding-top: -25px;
}
</style>
</head>
<body>
<div class="color">
<div class="border">
<div class="a">
<form action="/action_page.php">
<p class="a">Card Ownership</p>
<label class="radio-inline">
<input type="radio" name = "ownership" value="Personal" checked>
Personal<br>
</label>
<label class="radio-inline">
<input type="radio" name = "ownership" value="Buisness">
Buisness<br>
</label>
</form>
</div>
<label>
<input type="checkbox" name="conformation" checked> I confirm that this purchase has been authorized.
</label>
</div>
</div>
</body>
</html>
Check HTML Fieldset
<form>
<fieldset>
<legend>Card Ownership:</legend>
Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text">
</fieldset>
</form>
Related
I'm just just now starting out and this is my first project. No matter what I do my image won't show (only the top header image will), on the web-page it will show as broken or won't show at all.
I've tried:
using a relative and absolute path
different types of syntax (../../ - ../ - /)
commenting out some css to see if that would change things
using a completely different image
adding an image just always seemed so easy to me and I don't understand why this simple task can't be preformed. would love the help.
<!DOCTYPE html>
<html>
<head>
<title>Knitting Submission Form</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./resources/css/index.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:100,200,300" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
</head>
<body>
<!-- resize icon or enter image -->
<header>
<h1>KNIT HUB</h1>
<br>
<br>
<h2>Knitting Submission Form</h2>
<h2>Share and Join Our Community</h2>
</header>
<img src="https://unsplash.com/photos/8uTqI_KpC_Q">
<img src="Knitting-Submission-Form/resources/images/gray yarn basket.jpeg">
<div>
<p>Name:<input type="text" placeholder="First Name/Nickname"></p>
<label for="age" class="age">Age:</label>
<select id="age-dropdown">
<option value="" disable selected hidden>...Choose</option>
<option value="1">12-19</option>
<option value="2">20-29</option>
<option value="3">30-39</option>
<option value="4">40-49</option>
<option value="5">50=59</option>
<option value="6">60-69</option>
<option value="7">70-79</option>
<option value="8">80+</option>
</select>
<br>
<p>How much do you typically spend a year on knitting materials?</p>
<span class="currencyinput">$<input type="text" name="currency"></span>
</div>
<div>
<h3>What's Your Knitting Skill Level?</h3>
<input type="checkbox" class="skill-level" name="skill-level" value="interested">Interested, I like yarn and
needles<br>
<input type="checkbox" class="skill-level" name="skill-level" value="beginner">Beginner, I know my knits and
purls<br>
<input type="checkbox" class="skill-level" name="skill-level" value="intermediate">Intermediate, Knitting is my
happy place<br>
<input type="checkbox" class="skill-level" name="skill-level" value="pro">Pro, I can dress myself in head to toe
knits<br>
<br>
</div>
<!-- find out "for" attribute-->
<div>
<form>
<h3>How many years have you been knitting?</h3>
<input type="radio" name="how-long" value="not-started">
<label for="">I haven't started yet</label><br>
<input type="radio" name="how-long" value="getting-started">
<label for="">Just getting started</label><br>
<input type="radio" name="how-long" value="1-3-years">
<label for="">1-3 years</label><br>
<input type="radio" name="how-long" value="4-7-years">
<label for="">4-7 years</label><br>
<input type="radio" name="how-long" value="8-14-years">
<label for="">8-14 years</label><br>
<input type="radio" name="how-long" value="15+">
<label for="age3">15+ years</label><br><br>
</div>
<br>
<div>
<h3>How many times a week do you knit?</h3>
<input type="radio" name="weekly" value="0-days">
<label for="">hey, i'm not there yet</label><br>
<input type="radio" name="weekly" value="1-2-days">
<label for="">1-2 days</label><br>
<input type="radio" name="weekly" value="3-4-days">
<label for="">3-4 days</label><br>
<input type="radio" name="weekly" value="5-6-days">
<label for="">5-6 days</label><br>
<input type="radio" name="weekly" value="60">
<label for="age2">7 days, i knit in my sleep</label><br>
</form>
</div>
<br>
<div>
<h3 class="favorite-things">What are your favorite things to knit?</h3>
<input type="checkbox" class="checkbox-inline" name="favorites" value="hats">Hats<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="scarves">Scarves<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="shawls">Shawls<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="blankets">Blankets<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="gloves">Gloves<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="sweaters">Sweaters<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="socks">Socks<br>
<input type="checkbox" class="checkbox-inline" name="favorites" value="other">Other<br>
</div>
<div>
<h3>What's your favorite thing about knitting?</h3>
<form action="/action_page.php">
<textarea name="message" rows="12" cols="40">Be creative as you like.</textarea>
</form>
</div>
<div>
<h3>Upload a photo of your latest creation below:</h3>
<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
<br>
<br>
<br>
<button type="submit">Share</button>
</form>
</div>
</body>
</html>
body {
padding-bottom: 100px;
background-color: rgba(255, 99, 71, 0.1);
margin-bottom: auto;
background-repeat: no-repeat;
}
header {
background: url("../images/pink heart yarn.jpeg");
width: 100%;
height: 670px;
margin-right: 400px;
text-align: center;
padding: 5px;
}
h1 {
font-family: Montserrat;
font-size: 90px;
font-weight: 200;
letter-spacing: .06em;
border: 1px solid black;
display: inline-block;
}
h2 {
font-family: "Poiret One";
font-weight: 200;
}
div {
font-family: lora;
padding-left: 20px;
}
}
.age {
display: inline-block;
margin: -1px;
}
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}
URLs shouldn't contain literal spaces. Change the image file name to not have spaces (such as gray_yarn+basket.jpeg) or update the code to encode the spaces (gray%20yarn%20basket.jpeg).
I need to beautifully design the "switches". Found an example on one site. How can I do the same? Please give a link to a similar example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Switches</title>
</head>
<body>
<form>
<p><input name="tech" type="radio" value="computer" checked>compute</p>
<p><input name="tech" type="radio" value="xbox">xbox</p>
<p><input name="tech" type="radio" value="playstation">playstation</p>
<p><input name="tech" type="radio" value="Game">Game</p>
<p><input name="tech" type="radio" value="TV">TV</p>
</form>
</body>
</html>
Here is an example of what I want to get.
You could do it like this.
You hide the radio circle but if you select it (by the label) you change the style of the label.
input{
display: none;
}
input + label{
font-size: 14px;
border: #9c94bb 1px solid;
width: 130px;
background-color: #ffffff;
transition: background-color .3s;
color: #000000;
text-align: center;
padding: 7px 0;
display: inline-block;
margin-right: 10px;
}
input:checked + label{
background: #ece8ff;
}
form{
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Switches</title>
</head>
<body>
<form>
<p>
<input name="tech" type="radio" value="computer" id="computer" checked>
<label for="computer">computer</label>
</p>
<p>
<input name="tech" type="radio" value="xbox" id="xbox">
<label for="xbox">xbox</label>
</p>
<p>
<input name="tech" type="radio" value="playstation" id="playstation">
<label for="playstation">playstation</label>
</p>
<p>
<input name="tech" type="radio" value="Game" id="game">
<label for="game">Game</label>
</p>
<p>
<input name="tech" type="radio" value="TV" id="tv">
<label for="tv">TV</label>
</p>
</form>
</body>
</html>
I'm doing a form where I want 3 input boxes to the left and to the right. Now, I copied the code from a past project of mine where it worked but now it wont work in this new project. I've tried every text-align and float I know about. I really don't know what to do anymore.
This is the code i have for this so far.
input[id=fname], input[id=lname], input[id=phone], input[id=city],i nput[id=email], input[id=birthday] {
width: 420px;
margin-bottom: 15px;
padding: 3px;
}
#left {
width: 40px;
display: inline-block;
box-sizing: border-box;
}
#right {
width: 440px;
display: inline-block;
float: right;
padding-left: 8px;
box-sizing: border-box;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="left">
<label>First Name</label>
<input id="fname" type="text" tabindex="1" >
<label>Phone</label>
<input id="phone" type="phone" tabindex="3">
<label>City</label>
<input id="city" type="text" tabindex="5">
</div>
<div id="right" class="box">
<label>Last Name</label>
<input id="lname" type="text" tabindex="2">
<label>Email</label>
<input id="email" type="email" tabindex="4">
<label>Birthday</label>
<input id="bday" type="date" tabindex="6">
</div>
</form>
</div>
</body>
</html>
You can simplify the HTML and CSS a lot here. Use display:grid to align everything:
form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 9px 20px;
}
input {
display: block;
width: 100%;
}
<form class="form" method="post">
<label>First Name
<input name="fname" type="text">
</label>
<label>Last Name
<input name="lname" type="text">
</label>
<label>Phone
<input name="phone" type="phone">
</label>
<label>Email
<input name="email" type="email">
</label>
<label>City
<input name="city" type="text">
</label>
<label>Birthday
<input name="bday" type="date">
</label>
</form>
You should try to make it so your order of inputs is left to right down the page as tabbing from first name to Phone and then back up to last name is not very intuitive (Although fixed with tabindex this can be default).
Here is how I would do it.
input[id=fname], input[id=lname], input[id=phone], input[id=city],input[id=email], input[id=birthday] {
width: 50%;
margin-bottom: 15px;
padding: 3px;
}
#form_fields {
display:flex;
flex-wrap:wrap;
}
#form_fields label {
width:50%;
}
#form_fields label input {
width:50%;
}
<!doctype html>
<html>
<head>
<title>Employee Directory</title>
<link rel="stylesheet" type="text/css" href="css/Styles.css">
</head>
<body>
<div class="form">
<form method="post">
<div id="form_fields">
<label>First Name<br />
<input id="fname" type="text" />
</label>
<label>Last Name<br />
<input id="lname" type="text" />
</label>
<label>Phone<br />
<input id="phone" type="phone" />
</label>
<label>Email<br />
<input id="email" type="email" />
</label>
<label>City<br />
<input id="city" type="text" />
</label>
<label>Birthday<br />
<input id="bday" type="date" />
</label>
</div>
</form>
</div>
</body>
</html>
I'm trying to make a form but when I try to centralise it, it just stay tight to the left side of #wrapper. It reacts to margin-top but not anything to do with going across. I've tried putting a value on margin, using margin-left and still nothing. I'm pretty sure I've followed the YouTube tutorial I'm working with character for character so not sure where I've gone wrong, does anybody have any ideas?
body {
padding: 0;
margin: 0;
background-color: #ccc;
}
#wrapper {
width: 1000px;
background-color: #FFF;
margin: 0px auto;
min-height: 400px;
margin-top: 40px;
border: 1px solid #999;
border-bottom: 3px solid #999;
border-radius: 5px;
}
#formDiv {
width: 200px;
margin: 0px auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv"></div>
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>
You closed your formdiv tag to early. Use this:
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="formDiv">
<form method="POST" action="index.php" enctype="multipart/form-data">
<label>First Name:</label><br>
<input type="text" name="fname" /> <br/><br/>
<label>Last Name:</label><br>
<input type="text" name="lname" /> <br/><br/>
<label>Email:</label><br>
<input type="text" name="email" /> <br/><br/>
<label>Password:</label><br>
<input type="password" name="password" /> <br/><br/>
<label>Image:</label><br>
<input type="file" name="image" /> <br/><br/>
<input type="submit" name="submit" />
</form>
</div>
</div>
</body>
</html>
If you need to center it, you also need to center form element
#wrapper form{
width: 180px;
margin: 0 auto;
}
http://jsfiddle.net/47ku1qud/
I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.
Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...
You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!