src/components/Form/Input


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<form [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="form">
  <fieldset class="form__fieldset">
    <legend class="form__legend">Search a new recipe</legend>
    <div class="form__item">
      <label for="search-by" class="form__label">By</label>
      <select
        id="search-by"
        name="search-by"
        class="form__select"
        formControlName="by"
      >
        <option value="name" selected>Name</option>
        <option value="ingredient">Ingredient</option>
        <option value="category">Category</option>
      </select>
    </div>
    <div class="form__item">
      <label for="search-query" class="form__label">Query</label>
      <input
        type="search"
        name="search-query"
        id="search-query"
        formControlName="query"
        class="form__input"
        placeholder="Keywords..."
      />
    </div>
    <button class="btn" type="submit">Search</button>
  </fieldset>
</form>