How do I get two form fields side by side, with each caption above the field?

advertisements

Problems: I am currently having two problems with the form I am trying to do:

  1. I am trying to have two forms side by side and I am stuck on how to achieve this with some css.

    The following is how the form currently looks:

I am trying to put the "or Search by Zip Code" section to on the right hand side of the "Search By Provider Credentials" form.

The following is the css I am using and html I am using:

.form-style-5{
    max-width: 500px;
    padding: 10px 20px;
    background: #f4f7f8;
    margin: 10px auto;
    padding: 20px;
    background: #f4f7f8;
    border-radius: 8px;
    font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
    border: none;
}
.form-style-5 legend {
    font-size: 1.4em;
    margin-bottom: 10px;
}
.form-style-5 label {
    display: block;
    margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
    font-family: Georgia, "Times New Roman", Times, serif;
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    margin: 0;
    outline: 0;
    padding: 7px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #e8eeef;
    color:#8a97a0;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    margin-bottom: 30px;

}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
    background: #d2d9dd;
}
.form-style-5 select{
    -webkit-appearance: menulist-button;
    height:35px;
}
.form-style-5 .number {
    background: #FF9900;
    color: #fff;
    height: 30px;
    width: 30px;
    display: inline-block;
    font-size: 0.8em;
    margin-right: 4px;
    line-height: 30px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 15px 15px 15px 0px;
}

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
    position: relative;
    display: block;
    padding: 19px 39px 18px 39px;
    color: #FFF;
    margin: 0 auto;
    background: #FF9900;
    font-size: 18px;
    text-align: center;
    font-style: normal;
    width: 100%;
    border-width: 1px 1px 3px;
    margin-bottom: 10px;
    height:55px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
    background: grey;
}
.formSpacing{margin-top:10px;}
.inputWidth1{width:80% !important;}
.inputWidth2{width:70% !important;}
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number">1</span> Search By Provider Credentials </legend>

<div style="display: inline-block;">
<label class="formSpacing" for="job">Provider Name</label>
<input class="inputWidth1" type="text" name="Name" placeholder="Provider Name *">
</div>
<div style="display: inline-block; margin-left:20px">
<label for="job">Provider Speciality</label>
<select id="job" name="Specialty">
<option value="">Select a Specialty *</option>
<option value="PCP">Primary Care Physician</option>
<option value="Pediatrics">Pediatrics</option>
</select>
</div>
<div style="display: inline-block;">
<label class="formSpacing" for="job">Gender</label>
<select id="job" name="Gender">
<option value="">Select a Gender *</option>
<option value="PCP">Male</option>
<option value="Pediatrics">Female</option>
</select>
</div>
<div style="display: inline-block; margin-left:55px">
<label for="job">City</label>
<select id="job" name="City">
<option value="">City *</option>
    <cfoutput query="cityFind">
        <option value=#city#>#city#</option>
  </cfoutput>
</select>
</div>
</fieldset>
<fieldset>
<legend><span class="number">2</span> or Search by Zip Code</legend>

<div style="display: inline-block;">
<label class="formSpacing" for="job">Zip Code</label>
<input class="inputWidth2" type="text" name="Name" placeholder="Zip Code *">
</div>

<div style="display: inline-block;  margin-left:20px">
<label for="job">Select Distance</label>
<select class="inputWidth2" id="job" name="Specialty">
<option value="">Select Distance *</option>
<option value="5" <cfif dist IS 5>selected="selected"</cfif>>5 Miles</option>
    <option value="10" <cfif dist IS 10>selected="selected"</cfif>>10 Miles</option>
    <option value="15" <cfif dist IS 15>selected="selected"</cfif>>15 Miles</option>
    <option value="20" <cfif dist IS 20>selected="selected"</cfif>>20 Miles</option>
</select>
</div>

</fieldset>

<div style="display: inline-block; margin-left:15px">
<input type="submit" value="Search" />
</div>
<div style="display: inline-block; margin-left:85px">
<input type="button" value=" Clear " onClick="ClearForm()">
</div>
</form>
</div>
  1. I am trying to figure out a way, in javascript, to run a different script depending on which input is selected. If the user selects any of the inputs in the "Search By Provider Credentials", then run a particular script, otherwise run the other script.

How can I achieve this?

Thank You


$("#cred input, #cred select").change(function() {
  // Do what credential search needs
  alert("credential");
});
$("#zip input, #zip select").change(function() {
  // Do what zip code search needs
  alert("zip code");
});
enter code here .form-style-5 {
  max-width: 800px;
  padding: 10px 20px;
  background: #f4f7f8;
  margin: 10px auto;
  padding: 20px;
  background: #f4f7f8;
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
  border: none;
}
.form-style-5 legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}
.form-style-5 label {
  display: block;
  margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
  font-family: Georgia, "Times New Roman", Times, serif;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 0;
  outline: 0;
  padding: 7px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #e8eeef;
  color: #8a97a0;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
  background: #d2d9dd;
}
.form-style-5 select {
  -webkit-appearance: menulist-button;
  height: 35px;
}
.form-style-5 .number {
  background: #FF9900;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 15px 15px 15px 0px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
  position: relative;
  display: block;
  padding: 19px 39px 18px 39px;
  color: #FFF;
  margin: 0 auto;
  background: #FF9900;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  width: 100%;
  border-width: 1px 1px 3px;
  margin-bottom: 10px;
  height: 55px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
  background: grey;
}
.formSpacing {
  margin-top: 10px;
}
.inputWidth1 {
  width: 80% !important;
}
.inputWidth2 {
  width: 70% !important;
}
.form-style-5 > form > div {
  vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-style-5">
  <form>
    <div id="cred" style="display: inline-block;">
      <fieldset>
        <legend><span class="number">1</span> Search By Provider Credentials</legend>

        <div style="display: block;">

          <div style="display: inline-block;">
            <label class="formSpacing" for="job">Provider Name</label>
            <input class="inputWidth1" type="text" name="Name" placeholder="Provider Name *">
          </div>
          <div style="display: inline-block; margin-left:20px">
            <label for="job">Provider Speciality</label>
            <select id="job" name="Specialty">
              <option value="">Select a Specialty *</option>
              <option value="PCP">Primary Care Physician</option>
              <option value="Pediatrics">Pediatrics</option>
            </select>
          </div>

        </div>

        <div style="display: block;">
          <div style="display: inline-block;">
            <label class="formSpacing" for="job">Gender</label>
            <select id="job" name="Gender">
              <option value="">Select a Gender *</option>
              <option value="PCP">Male</option>
              <option value="Pediatrics">Female</option>
            </select>
          </div>
          <div style="display: inline-block; margin-left:55px">
            <label for="job">City</label>
            <select id="job" name="City">
              <option value="">City *</option>
              <cfoutput query="cityFind">
                <option value=#city#>#city#</option>
              </cfoutput>
            </select>
          </div>
        </div>
      </fieldset>

    </div>

    <div id="zip" style="display: inline-block;">

      <fieldset>
        <legend><span class="number">2</span> or Search by Zip Code</legend>

        <div style="display: inline-block;">
          <label class="formSpacing" for="job">Zip Code</label>
          <input class="inputWidth2" type="text" name="Name" placeholder="Zip Code *">
        </div>

        <div style="display: inline-block;  margin-left:20px">
          <label for="job">Select Distance</label>
          <select class="inputWidth2" id="job" name="Specialty">
            <option value="">Select Distance *</option>
            <option value="5" <cfif dist IS 5>selected="selected"</cfif>>5 Miles</option>
            <option value="10" <cfif dist IS 10>selected="selected"</cfif>>10 Miles</option>
            <option value="15" <cfif dist IS 15>selected="selected"</cfif>>15 Miles</option>
            <option value="20" <cfif dist IS 20>selected="selected"</cfif>>20 Miles</option>
          </select>
        </div>

      </fieldset>

    </div>

    <div style="display: block;">
      <div style="display: inline-block; margin-left:15px">
        <input type="submit" value="Search" />
      </div>
      <div style="display: inline-block; margin-left:85px">
        <input type="button" value=" Clear " onClick="ClearForm()">
      </div>
    </div>
  </form>

</div>

1. This should result in what you need, the changes were some added divs around the parts of the forms and two lines of css to get the right side of the form in place and enlarge the holding div as the form got wider. If you see it in one column use the full page in the snippet preview as the preview width might not be enough to hold the form width.

2. I added some JavaScript, but without more information it might not be what you need, as it runs when you actually change something and it uses jquery.