-3
我有一个简单的html与我们联系的dropbox，它允许我选择多个selections中的一个，并将其发送到我的电子邮件，但我想要它，所以如果可能，我可以选择多个选项。病包括HTML和联系我们PHP的联系我们html复选框论坛
的CSSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#skills {
color:F0F8FF;
}
.about {
margin: 70px auto 40px;
padding: 8px;
width: 260px;
font: 10px/18px 'Lucida Grande', Arial, sans-serif;
color: #bbb;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
background: #383838;
background: rgba(34, 34, 34, 0.8);
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}
.about a {
color: #eee;
text-decoration: none;
border-radius: 2px;
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
-o-transition: background 0.1s;
transition: background 0.1s;
}
.about a:hover {
text-decoration: none;
background: #555;
background: rgba(255, 255, 255, 0.15);
}
.about-links {
height: 30px;
}
.about-links > a {
float: left;
width: 50%;
line-height: 30px;
font-size: 12px;
}
.about-author {
margin-top: 5px;
}
.about-author > a {
padding: 1px 3px;
margin: 0 -1px;
}
/*
* Copyright (c) 2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #879fa6 !important;
}
::-webkit-input-placeholder {
color: #879fa6;
}
:-ms-input-placeholder {
color: #879fa6 !important;
}
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #e4ecef;
}
input, textarea, select, label {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.contact {
position: relative;
margin: 50px auto;
padding: 5px;
width: 320px;
background: #eef5f7;
border: 1px solid #cfd5da;
border-bottom-color: #ccd1d6;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contact-inner {
padding: 25px;
background: white;
border-radius: 2px;
}
.contact:before, .contact:after, .contact-inner:before, .contact-inner:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 1px;
height: 1px;
border: outset transparent;
border-width: 12px 14px 0;
border-top-style: solid;
-webkit-transform: rotate(360deg);
}
.contact:before {
margin-top: 1px;
border-top-color: #d8e1e6;
}
.contact-inner:before {
border-top-color: #ccd1d6;
}
.contact-inner:after {
margin-top: -1px;
border-top-color: #eef5f7;
}
.contact:after {
margin-top: -8px;
border-top-color: white;
}
.contact-input {
overflow: hidden;
margin-bottom: 30px;
padding: 5px;
background: #eef7f9;
border-radius: %px;
}
.contact-input > input, .contact-input > textarea {
display: block;
width: 100%;
height: 29px;
padding: 0 9px;
color: #4d5a5e;
background: white;
border: 1px solid #cfdfe3;
border-bottom-color: #d2e2e7;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
}
.contact-input > input:focus, .contact-input > textarea:focus {
border-color: #93c2ec;
outline: 0;
-webkit-box-shadow: 0 0 0 8px #e1ecf5;
box-shadow: 0 0 0 8px #e1ecf5;
}
.lt-ie9 .contact-input > input, .lt-ie9 .contact-input > textarea {
line-height: 27px;
}
.contact-input > textarea {
padding: 4px 8px;
height: 90px;
line-height: 20px;
resize: none;
}
#email {
color:purple; /*target element with id email and set text color to blue*/
}
#name {
color: purple; /*target element with id name and set text color to red*/
}
#skype {
color: purple; /*target element with id skype and set text color to green*/
}
#skills {
color: purple; /*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 {
color: purple; /*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*/
}
#interested {
color: purple; /*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*/
}
#findus {
color: purple; /*target element with id message and set text color to purple*/
}
.select {
display: block;
position: relative;
overflow: hidden;
background: white;
border: 1px solid #d2e2e7;
border-bottom-color: #c5d4d9;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: -moz-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: -o-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: linear-gradient(to bottom, #fcfdff, #f2f7f7);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.select:before, .select:after {
content: '';
position: absolute;
right: 11px;
width: 0;
height: 0;
border-left: 3px outset transparent;
border-right: 3px outset transparent;
}
.select:before {
top: 10px;
border-bottom: 3px solid #7f9298;
}
.select:after {
top: 16px;
border-top: 3px solid #7f9298;
}
.select > select {
position: relative;
z-index: 2;
width: 112%;
height: 29px;
line-height: 17px;
padding: 5px 9px;
padding-right: 0;
color: #80989f;
background: transparent;
background: rgba(0, 0, 0, 0);
border: 0;
-webkit-appearance: none;
}
.select > select:focus {
color: #4d5a5e;
outline: 0;
}
.contact-submit {
text-align: right;
}
.contact-submit > input {
display: inline-block;
vertical-align: top;
padding: 0 14px;
height: 29px;
font-weight: bold;
color: #729fb2;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
background: #deeef4;
border: 1px solid #bed6e3;
border-bottom-color: #accbd9;
border-radius: 15px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: -moz-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: -o-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: linear-gradient(to bottom, #e6f2f7, #d0e6ee);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
}
.contact-submit > input:active {
color: #6a95a9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #c9dfe9;
border-color: #a3bed0 #b5ccda #b5ccda;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="Your Email.." name="email" placeholder="Your Email..." autofocus>
<input type="text" id="name" value="Your Full Name" name="name" placeholder="Your Full Name." autofocus>
<input type="text" id="skype" value="Your Skype Name" name="skype" placeholder="Your Skype Name." autofocus>
<input type="text" id="findus" value="How Did You Find Us" name="findus" placeholder="How did you find us." autofocus>
</p>
<div id="skills">
<p class="contact-input">
<label for="select" class="select">
<select name="skills" id="skills">
<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="purple" value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option class="purple" value="Community Crowd Funding">Community Crowd Funding</option>
</select>
</select>
<label for="select" class="select">
<select name="interested" id="interested">
<option value="" selected>I'm interested in</option>
<option value="Include me on Visionary Circle">Include me on Visionary Circle</option>
<option class="purple" value="Can Travel">Can Travel</option>
<option value="Benefactor">Benefactor</option>
<option class="purple" value="Community Crowd Funding">Community Crowd Funding</option>
<option value="Financial Contributor">Financial Contributor</option>
<option value="Have a similar project">Have a similar project</option>
<option value="Special Interest">Special Interest</option>
<option value="Skilled">Skilled</option>
<option value="Skype Chat">Skype Chat</option>
<option value="All">All</option>
<option value="None">None</option>
</select>
</label>
</p>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…">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>
<?php
if(isset($_POST['submit']))
{
$skills = $_POST['skills'];
$email = $_POST['email'];
$name = $_POST['name'];
$participate = $_POST['participate'];
$interested = $_POST['interested'];
$skype = $_POST['skype'];
$findus = $_POST['findus'];
$query = $_POST['message'];
$email_from = $name.'<'.$email.'>';
$to="";
$subject="Contact Form PurpleParadise!";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: ".$email_from."\r\n";
$message="
skills:
$skills
<br>
Email-Id:
$email
<br>
name:
$name
<br>
participate:
$participate
<br>
interested:
$interested
<br>
findus:
$findus
<br>
Message:
$query
";
if(mail($to,$subject,$message,$headers))
header("Location:../contact-us.html?msg=Successful Submission! Thankyou for contacting us.");
else
header("Location:../contact-us.html?msg=Error To send Email !");
//contact:[email protected]
}
?>
您是否尝试过在发布您的问题之前搜索？这是一个很好的开始，以检查是否有人曾经有过同样的问题。有一些类似于你在这里试图做的事情：http://stackoverflow.com/questions/14026361/php-multiple-checkbox-array –
这很好。但是你有没有编程问题？这个网站是为了问题，而不是“我想...（你为我做我的工作）”待办事项清单倾销 –