Web/lecture 16.html at main · KAZAHv2/Web · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html class="no-touch">
  <head>
  </head>
  <body>
    <form name="search">
      <label>Search the site:
        <input type="text" name="search">
      </label>
      <input type="submit" value="Search!">
    </form>

    <hr>

    <form name="search-person">
      Search the visitors:
      <table id="age-table">
        <tbody><tr>
          <td>Age:</td>
          <td id="age-list">
            <label>
              <input type="radio" name="age" value="young">less than 18</label>
            <label>
              <input type="radio" name="age" value="mature">18-50</label>
            <label>
              <input type="radio" name="age" value="senior">more than 50</label>
          </td>
        </tr>

        <tr>
          <td>Additionally:</td>
          <td>
            <input type="text" name="info[0]">
            <input type="text" name="info[1]">
            <input type="text" name="info[2]">
          </td>
        </tr>

      </tbody></table>

      <input type="submit" value="Search!">
    </form>

    <textarea id="BFI_DATA" style="width: 1px; height: 1px; display: none;"></textarea>

    <!-- MY SCRIPT -->

    <script>
      console.log(document.querySelector('#age-table'))
      console.log(document.querySelectorAll('#age-table label'))
      console.log(document.querySelector('#age-table td'))
      console.log(document.querySelector('form[name="search"]'))
      console.log(document.querySelector('form[name="search"] input'))
      console.log(document.querySelector('form[name="search"] input:last-child'))
    </script>
  </body>
</html>