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.

Related Articles

How do I get two HTML check boxes elegantly to type each other?

I have two mutually exclusive checkboxes; that being so, I'd like each one to automatically reflect the opposite state of the other when a change is made: if checkboxA is checked, checkboxB should be, if checked, unchecked (etc., I'm sure you know wh

Can you require two form fields to match HTML5?

Is there a way to require the entries in two form fields to match using HTML5? Or does this still have to be done with javascript? For example, if you have two password fields and want to make sure that a user has entered the same data in each field,

How to dynamically calculate a form field using jQuery?

I have two form fields, lets call them numerator and denominator. I want a third field, the total, to be updated automatically every time one of those values is changed (it already gets calculated in the database correctly when the form is submitted)

Create a URL from two form fields

Essentially, we have two form fields asking for users to supply us with two alphanumeric strings, and a URL needs to be constructed from the two. However, there is a basic structure to the URL that needs to be kept in place. Users will input the requ

Using a custom validator to compare two form fields

I'm working on learning custom validations in rails and am attempting to apply it for the purpose of comparing two form fields. So far, I can easily pass one value to the custom my custom validator which I've stored in app/validation/pin_validator.rb

How to make a bootstrap form field 100 percent wide

I have two col divs in a row with each having two text filed while re-sizing in mobile the width of the textbox is not going to 100% and looking ugly. Below is my bootstrap code, but in select filed the width is looks OK .. here is the demo link see

How do I get a list of domain user accounts with win32 api?

How do I get a list of domain user accounts with win32 api? In particular, I can't get this list when the computer is not the domain controller. Instead it is a member of the domain.Look into the LDAP API. This will let you query the LDAP server whic