DEV Community

Cover image for Form Input Types & Branching
Saoud
Saoud

Posted on

Form Input Types & Branching

#github #codenewbie #html #javascript

Form Input Types

Examples

Select Boxes

https://www.dropbox.com/s/882ehfn65mwtp3c/select-box-form-input.png?raw=1

HTML 

<select class="form-control" id="beverage">
  <option value="coffee">Coffee</option>
  <option value="tea">Tea</option>
  <option value="kombucha">Kombucha</option>
  <option value="water">Water</option>
</select>
Enter fullscreen mode Exit fullscreen mode

JavaScript 

const beverage = $("#beverage").val();
Enter fullscreen mode Exit fullscreen mode

Radio Buttons

https://www.dropbox.com/s/6cyyoozd5wam00h/radio-button-form-input.png?raw=1

HTML 

<div class="radio">
  <label>
    <input type="radio" name="flavor" value="chocolate" checked>
    Chocolate
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="flavor" value="vanilla">
    Vanilla
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="flavor" value="cookiesandcream">
    Cookies & Cream
  </label>
</div>
Enter fullscreen mode Exit fullscreen mode

JavaScript 

const flavor = $("input:radio[name=flavor]:checked").val();
Enter fullscreen mode Exit fullscreen mode

Date Picker

https://www.dropbox.com/s/vojqcdzn0bk92r2/date-select-form-input.png?raw=1

HTML 

<div class="form-group">
  <label for="born">Date of birth:</label>
  <input id="born" class="form-control" type="date">
</div>
Enter fullscreen mode Exit fullscreen mode 
const dob = $("#born").val();
Enter fullscreen mode Exit fullscreen mode

Color Picker 

<div class="form-group">
  <label for="color">What is your favorite color?</label>
  <input id="color" class="form-control" type="color">
</div>
Enter fullscreen mode Exit fullscreen mode

JavaScript 

const favoriteColor = $("#color").val();
Enter fullscreen mode Exit fullscreen mode

Tips

  • Marking your HTML input field as number, date, or tel, doesn't mean it will automatically be a JavaScript number type. type="number" just means that the form field will only accept number values. But when you use .val() to read the input, it will still come in as a JavaScript string, not a number.

Branching

Terminology

  • Branching: Determining the flow of your code based on certain conditions. (ie: If something is true, do one thing. If this same thing is false, do a different thing.)
  • Boolean: Returns true or false. When JavaScript is attempting to discern whether a condition is true, it's looking for a boolean.
  • Comparison operators: ===, >, <, >=, <=.
  • = sets a variable; === compares two things. Don't use ==.

Examples

One branch:

if (age > 21) {
  $('#drinks').show();
}
Enter fullscreen mode Exit fullscreen mode

Two branches:

if (age > 21) {
  $('#drinks').show();
} else {
  $('#under-21').show();
}
Enter fullscreen mode Exit fullscreen mode

Three branches:

if (age > 21) {
  $('#drinks').show();
} else if (age === 21) {
  $('#drinks').show();
} else {
  $('#under-21').show();
}
Enter fullscreen mode Exit fullscreen mode

Branching can use a variable whose value is a boolean:

const over21 = true;
if (over21) {
  $('#drinks').show();
}
Enter fullscreen mode Exit fullscreen mode

Comparison operators return booleans:

3 > 2;
// returns true
Enter fullscreen mode Exit fullscreen mode

Terminology

Logical operators:

  • && means and: gender === 'male' && age < 26
  • || means or: gender === 'male' || age < 26
  • ! means not: !under18
  • Empty strings, the number 0, the number NaN, undefined, null, and false itself are falsey. If JavaScript sees any of these as a branching condition, it will treat them as false. Everything else is truthy.

Top comments (0)