Payload Logo

Osnovna forma (Form)

Author

Date Published

Početna forma

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Početna Forma</title>
7</head>
8<body>
9  <form>
10    <h1>Registracija</h1>
11    <img src="https://via.placeholder.com/100" alt="Profilna slika">
12    <label>Ime:</label>
13    <input type="text" id="name" name="name" placeholder="Unesite ime">
14    <label>Dob:</label>
15    <input type="number" id="age" name="age" placeholder="Unesite dob">
16    <label>Spol:</label>
17    <select id="gender" name="gender">
18      <option value="male">Muško</option>
19      <option value="female">Žensko</option>
20      <option value="other">Drugo</option>
21    </select>
22    <button type="submit">Pošalji</button>
23    <a href="#">Prijava</a>
24    <a href="#">Pomoć</a>
25  </form>
26</body>
27</html>
28

Uređena forma

Prvi korak transformacije uključuje stilizaciju forme s ciljem poboljšanja čitljivosti i izgleda. Primijenjeni su ključni Flexbox propertiji poput display: flex, flex-direction: column, i gap za vertikalno raspoređivanje elemenata s razmakom između njih. Gumbi, inputi i select elementi dobili su padding za povećanje klikanja i bolju preglednost te border-radius za zaobljene rubove. Korišten je box-shadow za stvaranje sjene i efekt lebdenja forme iznad pozadine, dok background-color mijenja boju pozadine same forme. Cijeli sadržaj je centriran unutar stranice pomoću justify-content: center i align-items: center na tijelu stranice.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Interaktivna Forma</title>
7  <style>
8    body {
9      font-family: Arial, sans-serif;
10      background-color: #f9f9f9;
11      margin: 0;
12      display: flex;
13      justify-content: center;
14      align-items: center;
15      height: 100vh;
16    }
17

18    .form-container {
19      display: flex;
20      flex-direction: column;
21      gap: 1rem;
22      padding: 2rem;
23      background-color: white;
24      border-radius: 8px;
25      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
26      width: 300px;
27    }
28

29    .form-container h1 {
30      margin: 0;
31      font-size: 1.5rem;
32      color: #333;
33      text-align: center;
34    }
35

36    .form-group {
37      display: flex;
38      flex-direction: column;
39      gap: 0.5rem;
40    }
41

42    label {
43      font-size: 0.9rem;
44      color: #555;
45    }
46

47    input, select, button {
48      padding: 0.8rem;
49      font-size: 1rem;
50      border: 1px solid #ddd;
51      border-radius: 4px;
52    }
53

54    button {
55      background-color: #007bff;
56      color: white;
57      cursor: pointer;
58      transition: background-color 0.3s;
59    }
60

61    button:hover {
62      background-color: #0056b3;
63    }
64

65    .image-container {
66      display: flex;
67      justify-content: center;
68    }
69

70    .image-container img {
71      max-width: 100px;
72      border-radius: 50%;
73    }
74

75    .links {
76      display: flex;
77      justify-content: center;
78      gap: 1rem;
79    }
80

81    .links a {
82      text-decoration: none;
83      color: #007bff;
84      transition: color 0.3s;
85    }
86

87    .links a:hover {
88      color: #0056b3;
89    }
90  </style>
91</head>
92<body>
93  <form class="form-container">
94    <h1>Registracija</h1>
95    <div class="image-container">
96      <img src="https://via.placeholder.com/100" alt="Profilna slika">
97    </div>
98    <div class="form-group">
99      <label>Ime:</label>
100      <input type="text" id="name" name="name" placeholder="Unesite ime">
101    </div>
102    <div class="form-group">
103      <label>Dob:</label>
104      <input type="number" id="age" name="age" placeholder="Unesite dob">
105    </div>
106    <div class="form-group">
107      <label>Spol:</label>
108      <select id="gender" name="gender">
109        <option value="male">Muško</option>
110        <option value="female">Žensko</option>
111        <option value="other">Drugo</option>
112      </select>
113    </div>
114    <button type="submit">Pošalji</button>
115    <div class="links">
116      <a href="#">Prijava</a>
117      <a href="#">Pomoć</a>
118    </div>
119  </form>
120</body>
121</html>
122

Forma s logikom slanja podataka

Drugi korak je dodavanje interaktivnosti. Ovo uključuje povezivanje forme s JavaScript logikom putem addEventListener. Logika prati korisnički unos dohvaćanjem vrijednosti input polja pomoću form.name.value, form.age.value, i form.gender.value. Na događaj submit, zadano ponašanje forme se zaustavlja s event.preventDefault() kako bi se omogućila prilagodljiva kontrola toka. Korišten je fetch API za simulaciju HTTP POST zahtjeva prema dummy endpointu (jsonplaceholder.typicode.com), uz slanje podataka u JSON formatu. U slučaju uspjeha, prikazuje se poruka putem alert, dok se greške hvatane try...catch blokom prikazuju u konzoli i korisniku kroz drugu poruku. Ova tehnika omogućuje daljnju ekspanziju, poput povezivanja sa stvarnim backendom.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Forma s Logikom</title>
7  <style>
8    body {
9      display: flex;
10      justify-content: center;
11      align-items: center;
12      height: 100vh;
13      font-family: Arial, sans-serif;
14      background-color: #f4f4f9;
15    }
16

17    form {
18      display: flex;
19      flex-direction: column;
20      gap: 1rem;
21      background: white;
22      padding: 2rem;
23      border-radius: 8px;
24      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
25    }
26

27    input, select, button {
28      padding: 0.8rem;
29      font-size: 1rem;
30      border: 1px solid #ddd;
31      border-radius: 4px;
32    }
33

34    button {
35      background-color: #007bff;
36      color: white;
37      cursor: pointer;
38    }
39  </style>
40</head>
41<body>
42  <form id="registration-form">
43    <h1>Registracija</h1>
44    <label>Ime:</label>
45    <input type="text" id="name" name="name" placeholder="Unesite ime">
46    <label>Dob:</label>
47    <input type="number" id="age" name="age" placeholder="Unesite dob">
48    <label>Spol:</label>
49    <select id="gender" name="gender">
50      <option value="male">Muško</option>
51      <option value="female">Žensko</option>
52      <option value="other">Drugo</option>
53    </select>
54    <button type="submit">Pošalji</button>
55  </form>
56

57  <script>
58    const form = document.getElementById('registration-form');
59

60    form.addEventListener('submit', async (event) => {
61      event.preventDefault();
62

63      const formData = {
64        name: form.name.value,
65        age: form.age.value,
66        gender: form.gender.value,
67      };
68

69      try {
70        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
71          method: 'POST',
72          headers: {
73            'Content-Type': 'application/json',
74          },
75          body: JSON.stringify(formData),
76        });
77

78        const data = await response.json();
79        console.log('Odgovor API-ja:', data);
80        alert('Podaci uspješno poslani!');
81      } catch (error) {
82        console.error('Greška pri slanju podataka:', error);
83        alert('Dogodila se greška.');
84      }
85    });
86  </script>
87</body>
88</html>
89

Za one koji žele dodatno usavršiti znanje, nakon odgovora prikažite primljene podatke u vlastitom modalu. Kod za to ćemo proći sljedeći put.