Question

我有一个简单的html联系我们的Dropbox，它允许我选择其中一个sellections，它发送到我的电子邮件但我想要它，所以我可以选择多个选项，如果可能的话。生病了包括html和联系我们php

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:-your-email@your-domain.com
 }
?>

Answer 1

将multiple属性添加到select
将名称更改为name="skills"到name="skills[]"

使用Ctrl + Select选择多个选项

    <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" multiple="multiple">      
            <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" multiple>
            <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" multiple>
            <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内容进行以下更改。要将数组转换为字符串进行处理，请使用逗号作为分隔符

//change  $skills = $_POST['skills']; to 
$skills = implode(",", $_POST['skills']); 
//change   $participate = $_POST['participate'];
$participate = implode(",", $_POST['participate']);
//change  $interested = $_POST['interested'];
$interested = implode(",", $_POST['interested']);

始终记得相应地清理用户输入

这是整个test.php文件

<?php
 if(isset($_POST['submit']))
 {
    //for debugging
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
    $skills = implode(",", $_POST['skills']);
    $email = $_POST['email'];
    $name = $_POST['name'];
    $participate = implode(",", $_POST['participate'])?:"";
    $interested = implode(",", $_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        

   ";
   echo $message;
  //commented for debugging uncomment to use
  // 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:-your-email@your-domain.com */
 }
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<form name="enq" method="post" action="">
    <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>
        <input type="text" id="findus" value="" 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" multiple="multiple">      
            <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" multiple>
            <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" multiple>
            <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…"> </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>
</body>
</html>

联系我们html复选框论坛

1 个答案: