How can i add a border to a form i tried <border:2px;> but that does not work, I also tried adding a background image to the form but with no success i tried
.form-all {
background: url(url.jpg) no-repeat top left;
}
Here is my form
form {
border: 2px;
}
<form name="myform" id="EmailForm" action="" method="post">
<label> Number hours: </label>
<Select class="form-control input-sm error" min="3" name="Hours" id="Hours" onChange="calculatePrice()" placeholder="<?php echo $RoomErr;?>">
<OPTION value="0">Select Number of Hours</OPTION>
<OPTION value="45">3 Hours</OPTION>
<OPTION value="60">4 Hours</OPTION>
<OPTION value="75">5 hours</OPTION>
<OPTION value="90">5 hours +</OPTION>
</select>
<br>
<br>
<label>Would You Like Ironing? </label>
<Select NAME="ironing" id="ironing" onChange="calculatePrice()" class="form-control input-sm error" placeholder="<?php echo $ironingErr;?>">
<OPTION value="0">Would you Like Ironing?</OPTION>
<OPTION value="8">Yes</OPTION>
<OPTION value="0">No</OPTION>
</select>
<br><br> Your Estimated Quate: £<input class="transparent-input" type="text" id="PicExtPrice">
border:2px solid #000;
Or, you can replace #000 with any colour you like.
Related
I have to connect a tag, three tags and a that contains a slider to a that is connected to a database.
I have made all of the elements but they are in no way connected to each other, and pressing the button does nothing.
Here is the form where the user types their points:
<form id="pointsform">
Points:<input type="number">
</form>
Then I have the user select a subject:
<select id="subject-selection">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
Then they choose the year:
<select id="year-selection">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
Then they choose the season:
<select id="season-selection">
<option value="Spring">Kevät</option>
<option value="Fall">Syksy</option>
</select>
Then they can choose a value from a slider:
<div class="slidecontainer">
<p id="slider">How strictly did your teacher grade:</p>
<input type="range" min="1" max="100" value="50">
Under all of that there is a button:
<button id="compare-button">Compare</button>
I would like to connect all the user inputted answers to the button, so when I click the button, it interacts with the database.
You simply have to wrap everything into a single form like this:
<form id="pointsform">
<input type="number">
<select id="subject-selection">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
<select id="year-selection">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select id="season-selection">
<option value="Spring">Kevät</option>
<option value="Fall">Syksy</option>
</select>
<div class="slidecontainer">
<p id="slider">How strictly did your teacher grade:</p>
<input type="range" min="1" max="100" value="50">
</div>
<input type="submit" value="Compare">
</form>
Put all the form controls inside the <form> element, not just the <input type="number">.
I'm trying to do something and I know using < br> isn't a good way of putting stuff on a new line so I was told to try H1-6's so I did but it instead made my answer and question on two different lines but if I do it like this
<div>
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">
Choose a room
</option>
<option value="S308">
S308
</option>
<option value="S324">
S324
</option>
<option value="L2">
L2
</option>
<option value="ME201">
ME201
</option>
<option value="ME208">
ME208
</option>
</div>
<div>
</select> <br>
<label for="machinenum">Select Your Machine Number:</label>
<label for="machinenum">1 - 15 </label>
<input id="machinenum" name="machinenum" type="number" min="1" max="15" value="1" required><br>
</div>
Then it works fine the outcome is like this:
instead of being like this:
or even without the h4 then having all questions stick together.
why not like this?
<div id="room">
<div>
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">Choose a room</option>
<option value="S308">S308</option>
<option value="S324">S324</option>
<option value="L2">L2</option>
<option value="ME201">ME201</option>
<option value="ME208">ME208</option>
</div>
...
</div>
You can use CSS for this:
your-selector-with-heading-and-input {
display: inline-block
}
jsFiddle: https://jsfiddle.net/sxLyox0e/
And you also should use label for the select heading and style the font size via CSS
So i'm trying to make the text inside the select form have colors so example where you write your name to send email i want the text is a color black example, Also inside the select form i tried using div but failed to get it to work. I tried putting this in the css also to link it to div also didn't
work.
#skills {
color:F0F8FF;
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="" name="email" placeholder="Your Email..." autofocus>
<input type="text" id="name" value="" name="name" placeholder="Your Full Name." autofocus>
<input type="text" id="skype" value="" name="skype" placeholder="Your Skype Name." autofocus>
</p>
<div id="skills">
<p class="contact-input">
<label for="select" class="select">
<select name="why" id="why">
<option value="" selected>Skills</option>
<option value="3D Printing">3D Printing</option>
<option value="Alternative Healers">Alternative Healers</option>
<option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
<option value="Architecture/Design">Architecture/Design</option>
<option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
<option value="Construction">Construction</option>
<option value="Culinary Arts">Culinary Arts</option>
<option value="Electrician">Electrician</option>
<option value="EM Technology">EM Technology</option>
<option value="Free Energy/QEG">Free Energy/QEG</option>
<option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
<option value="Hemp Farming">Hemp Farming</option>
<option value="Hempcrete">Hempcrete</option>
<option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
<option value="Landscaping">Landscaping</option>
<option value="Massage Therapist">Massage Therapist</option>
<option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
<option value="Permaculture">Permaculture</option>
<option value="Recycling">Recycling</option>
<option value="Sewing">Sewing</option>
<option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
<option value="Technology">Technology</option>
<option value="Other">Other</option>
<option value="All">All</option>
<option value="None">None</option>
</div>
</select>
<label for="select" class="select">
<select name="participate" id="participate">
<option value="" selected>When can you participate?</option>
<option value="3-6 months from now">3-6 months from now</option>
<option value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option value="Don't know yet">Don't know yet</option>
</select>
</label>
</p>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…"></textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
</p>
</fieldset>
</form>
Try using:
-input-placeholder
Is this what you wanted?
::-webkit-input-placeholder { /* WebKit browsers */
color: #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000;
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="" name="email" placeholder="Your Email..." autofocus />
<input type="text" id="name" value="" name="name" placeholder="Your Full Name." autofocus />
<input type="text" id="skype" value="" name="skype" placeholder="Your Skype Name." autofocus />
</p>
<div id="skills">
<label for="select" class="select"></label>
<select name="why" id="why">
<option value="" selected>Skills</option>
<option value="3D Printing">3D Printing</option>
<option value="Alternative Healers">Alternative Healers</option>
<option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
<option value="Architecture/Design">Architecture/Design</option>
<option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
<option value="Construction">Construction</option>
<option value="Culinary Arts">Culinary Arts</option>
<option value="Electrician">Electrician</option>
<option value="EM Technology">EM Technology</option>
<option value="Free Energy/QEG">Free Energy/QEG</option>
<option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
<option value="Hemp Farming">Hemp Farming</option>
<option value="Hempcrete">Hempcrete</option>
<option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
<option value="Landscaping">Landscaping</option>
<option value="Massage Therapist">Massage Therapist</option>
<option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
<option value="Permaculture">Permaculture</option>
<option value="Recycling">Recycling</option>
<option value="Sewing">Sewing</option>
<option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
<option value="Technology">Technology</option>
<option value="Other">Other</option>
<option value="All">All</option>
<option value="None">None</option>
</select>
<label for="select" class="select"></label>
<select name="participate" id="participate">
<option value="" selected>When can you participate?</option>
<option value="3-6 months from now">3-6 months from now</option>
<option value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option value="Don't know yet">Don't know yet</option>
</select>
</div>
</p>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…"></textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
</p>
</fieldset>
</form>
something like this?
#email {
color:blue; /*target element with id email and set text color to blue*/
}
#name {
color: red; /*target element with id name and set text color to red*/
}
#skype {
color: green; /*target element with id skype and set text color to green*/
}
#why {
color: orange; /*target element with id why and set text color to orange. in this case, its a select, so all the text within the select - meaning the options text- is orange*/
}
#participate .yellow {
color: yellow; /*target elements with class yellow (options) inside element id participate (select) and set text color to yellow. in this case, you can select which options to make yellow by adding classes*/
}
#message {
color: purple; /*target element with id message and set text color to purple*/
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="aaaa" name="email" placeholder="Your Email..." autofocus>
<input type="text" id="name" value="bbbbb" name="name" placeholder="Your Full Name." autofocus>
<input type="text" id="skype" value="cccc" name="skype" placeholder="Your Skype Name." autofocus>
</p>
<div id="skills">
<p class="contact-input">
<label for="select" class="select">
<select name="why" id="why">
<option value="" selected>Skills</option>
<option value="3D Printing">3D Printing</option>
<option value="Alternative Healers">Alternative Healers</option>
<option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
<option value="Architecture/Design">Architecture/Design</option>
<option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
<option value="Construction">Construction</option>
<option value="Culinary Arts">Culinary Arts</option>
<option value="Electrician">Electrician</option>
<option value="EM Technology">EM Technology</option>
<option value="Free Energy/QEG">Free Energy/QEG</option>
<option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
<option value="Hemp Farming">Hemp Farming</option>
<option value="Hempcrete">Hempcrete</option>
<option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
<option value="Landscaping">Landscaping</option>
<option value="Massage Therapist">Massage Therapist</option>
<option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
<option value="Permaculture">Permaculture</option>
<option value="Recycling">Recycling</option>
<option value="Sewing">Sewing</option>
<option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
<option value="Technology">Technology</option>
<option value="Other">Other</option>
<option value="All">All</option>
<option value="None">None</option>
</select>
<label for="select" class="select">
<select name="participate" id="participate">
<option value="" selected>When can you participate?</option>
<option value="3-6 months from now">3-6 months from now</option>
<option class="yellow" value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option class="yellow" value="Don't know yet">Don't know yet</option>
</select>
</label>
</label>
</p>
</div>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…">ddddd</textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
</p>
</fieldset>
</form>
I use Dreamweaver to write my html code, but now have run into a problem.
I have created an enquiry form which contains several different fields, but when I try to validate the form using Window | Behavior | Validate Form, it only shows my "firstname", "lastname", "Datepicker1", "Datepicker2" as well as the "Comments" field.
I want to make sure that the telephone, email and select fields are required and will be filled by a number and an email address. It worked fine when I made the contact form, but for some reason it does not in the enquiry.
My code is as follows:
<form action="../../enquiryform.php" method="post" id="enquiry">
<h1>ENQUIRE ABOUT<br><span style="color:#816122">VILLA 2610</span></h1>
<input type="hidden" name="villaid" id="villaid" value="2610">
<br>
Arrival Date<br>
<input type="text" name="arrivaldate" id="Datepicker1">
<br>Departure Date<br>
<input type="text" name="departuredate" id="Datepicker2"><br>
First Name
<input type="text" name="firstname" id="firstname"><br>
Last Name
<input type="text" name="lastname" id="lastname"><br>
Telephone
<input type="tel" name="tel" id="tel"><br>
Email
<input type="email" name="email" id="email"><br>
<div class="leftcolumn">Adults<br>
<select name="adults" id="adults">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
<div class="rightcolumn">Children<br>
<select name="children" id="children">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
Comments (optional)<br>
<textarea name="comments" id="comments" wrap="soft" style="width:150px; height:100px;"></textarea><br>
<p class="antispam">Leave this empty: <input name="url" type="text" id="url" /></p>
<input type="submit" value="Send" style="background-color:#aa802c; color:#FFFFFF; border-radius:5px; text-align:center; cursor:pointer;"><br><br>
I have added the following inside the starting form bracket:
onSubmit="MM_validateForm('firstname','','R','lastname','','R');return document.MM_returnValue"
But what should I use for a telephone number, email address as well as the 2 select options that I have?
My suggestion is
onSubmit="MM_validateForm('firstname','','R','lastname','','R','tel','','RisNum','email','','RisEmail',);return document.MM_returnValue"
But how do I add that I require for my viewers to select children and adults options?
And are my thoughts above correct?
Why don't you use the require attribute on input tag like this
Telephone
<input type="tel" name="tel" id="tel" required>
I have a menubar that looks like this:
What I want is that the dropdownbox aligns right of the label. The first one (#Writers) is correct, altough it should be aligned a little bit higher because now it isn't vertically centered but that's not the issue.
The HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div class="horizontalNavigation">
<ul>
<li><span>Issue</span></li>
<li><span>Series</span></li>
<li><span>Writer</span></li>
<li><span>Editor</span></li>
<li><span>Letterer</span></li>
<li><span>Colourist</span></li>
<li><span>Cover Artist</span></li>
<li><span>Inker</span></li>
<li><span>Penciler</span></li>
<li><span>Trade Paper Back</span></li>
<li><span>Publisher</span></li>
</ul>
</div>
<div class="creditsbar">
<div class="creditsbarfields">
<form action="getInfo.php" method="get">
<label class="creditsbardropdown" for="writerName">
<span>#Writers:</span>
<form action="">
<select name="writer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="editorName">
<span>#Editors:</span>
<form action="">
<select name="editor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="lettererName">
<span>#Letterer:</span>
<form action="">
<select name="letterer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="colouristName">
<span>#Colourist:</span>
<form action="">
<select name="colourist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="coverArtistName">
<span>#Cover Artist:</span>
<form action="">
<select name="coverArtist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="inkerName">
<span>#Inker:</span>
<form action="">
<select name="inker">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="pencilerName">
<span>#Penciler:</span>
<form action="">
<select name="penciler">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<form>
<input type="submit" value="Next">
</form>
</form>
</div>
</div>
<div class="issueInformationLayout">
</div>
</body>
</html>
The CSS:
.creditsbar {
border: 5px solid;
border-radius: 25px;
width: 60%;
height: 5%;
margin: 1% 0% 0% 20%;
background-color: feedb4;
}
.creditsbarfields {
margin: 0% 0% 0% 2%;
width: 300%;
}
.creditsbardropdown {
float: left;
margin-right: 2%;
}
.horizontalNavigation {
background: url(../images/navigation.png) top left repeat-x;
border-radius: 75px;
height: 6%;
}
.horizontalNavigation * {
float: left;
}
.horizontalNavigation ul a {
margin: 5px 40px 0px 23px;
color: #578ba0;
font-size: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
.issueInformationLayout {
border: 5px solid;
border-radius: 25px;
border-color: #573700;
width: 50%;
height: 66%;
margin: 1% 0% 0% 25%;
background-color: feedb4;
overflow: hidden;
}
You have to set display:inline; for the dropdown lists:
HTML:
<div class="creditsbar">
<div class="creditsbarfields">
<form action="getInfo.php" method="get">
<label class="creditsbardropdown" for="writerName"> <span>#Writers:</span>
<form class="dropdownform" action="">
<select name="writer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="editorName"> <span>#Editors:</span>
<form class="dropdownform" action="">
<select name="editor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="lettererName"> <span>#Letterer:</span>
<form class="dropdownform" action="">
<select name="letterer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="colouristName"> <span>#Colourist:</span>
<form class="dropdownform" action="">
<select name="colourist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="coverArtistName"> <span>#Cover Artist:</span>
<form class="dropdownform" action="">
<select name="coverArtist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="inkerName"> <span>#Inker:</span>
<form class="dropdownform" action="">
<select name="inker">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="pencilerName"> <span>#Penciler:</span>
<form class="dropdownform" action="">
<select name="penciler">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<form>
<input type="submit" value="Next" />
</form>
</form>
</div>
</div>
CSS:
.creditsbar {
border: 5px solid;
border-radius: 25px;
height: 5%;
}
.creditsbarfields {
margin: 0 0 0 2%;
width: 100%;
}
.creditsbardropdown {
float: left;
margin-right: 2%;
}
.dropdownform {
display:inline;
}
Take a look at the output of the code above Here
And here is a FIDDLE
You could give each span that contains a title a class and then do something like this: Code Pen
.title, select {float: left;}
Note: I didn't use your css because it looked like you are missing some stuff that breaks it.