Form Input Types & Branching
Tags: github, codenewbie, html, javascript
Published: 2021-01-27 06:13:13

## Form Input Types

# **Examples**

---

### **Select Boxes**

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

### **HTML**

```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>
```

### **JavaScript**

```jsx
const beverage = $("#beverage").val();
```

### **Radio Buttons**

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

### **HTML**

```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>
```

### **JavaScript**

```jsx
const flavor = $("input:radio[name=flavor]:checked").val();
```

### **Date Picker**

![https://www.dropbox.com/s/vojqcdzn0bk92r2/date-select-form-input.png?raw=1](https://www.dropbox.com/s/vojqcdzn0bk92r2/date-select-form-input.png?raw=1)

### **HTML**

```html
<div class="form-group">
  <label for="born">Date of birth:</label>
  <input id="born" class="form-control" type="date">
</div>
```

```jsx
const dob = $("#born").val();
```

### **Color Picker**

```html
<div class="form-group">
  <label for="color">What is your favorite color?</label>
  <input id="color" class="form-control" type="color">
</div>
```

### **JavaScript**

```jsx
const favoriteColor = $("#color").val();
```

# **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:

```jsx
if (age > 21) {
  $('#drinks').show();
}
```

Two branches:

```jsx
if (age > 21) {
  $('#drinks').show();
} else {
  $('#under-21').show();
}
```

Three branches:

```jsx
if (age > 21) {
  $('#drinks').show();
} else if (age === 21) {
  $('#drinks').show();
} else {
  $('#under-21').show();
}
```

Branching can use a variable whose value is a boolean:

```jsx
const over21 = true;
if (over21) {
  $('#drinks').show();
}
```

Comparison operators return booleans:

```jsx
3 > 2;
// returns true
```

# **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.