javascript-form/index.html at main · igorMSoares/javascript-form · 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
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./cxDialog/dist/css/cxdialog.min.css" />
    <script src="./cxDialog/dist/js/cxdialog.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Cadastro de pessoas</title>
  </head>
  <body>
    <div id="content-wrapper">
      <main id="main">
        <h2>Cadastro</h2>
        <form id="js-person-form" class="form js-form">
          <label for="name"> Nome: </label>
          <input
            class="form-field js-field"
            id="name"
            maxlength="120"
            name="name"
            required
            type="text"
            inputmode="text"
            minlength="3"
            pattern="^([A-zÁ-ú]{3,})(\s[A-zÁ-ú]+)(\s[A-zÁ-ú]+)*$"
            placeholder=" "
            autocomplete="name"
          />

          <span id="inline-wrapper">
            <label for="birth-date"> Data de Nascimento: </label>
            <input
              class="form-field js-field"
              id="birth-date"
              name="birthdate"
              required
              type="date"
              inputmode="numeric"
              autocomplete="bday"
              placeholder=" "
            />

            <button type="submit">Salvar</button>
          </span>
          <p id="msg"></p>
        </form>
        <div id="table-wrapper"></div>
      </main>
    </div>
    <script defer src="script.js"></script>
  </body>
</html>