1. Krenućemo od jednostavne forme u kojoj se unosi Ime i Prezime i koja te podatke prosleđuje PHP stranici.
Primer HTML koda je:
<html>
<body>
<h2>HTML Forma</h2>
<form action="/prihvati_podatke.php">
<label for="fnameID">Ime:</label><br>
<input type="text" id="fnameID" name="fname" value="Marko"><br>
<label for="lnameID">Prezime:</label><br>
<input type="text" id="lnameID" name="lname" value="Marković"><br><br>
<input type="submit" value="Pošalji">
</form>
<p>Ako kliknete na "Pošalji", podaci iz forme će se proslediti stranici "/prihvati_podatke.php".</p>
</body>
</html>
U browseru ce se ova forma videti na sledeći način:
2. Primer za dodavanje checkbox-a u formi:
<input type="checkbox" id="vehicle1ID" name="vehicle1" value="Bike">
<label for="vehicle1ID"> Imam bicikl</label><br>
<input type="checkbox" id="vehicle2ID" name="vehicle2" value="Car">
<label for="vehicle2ID"> Imam auto</label><br>
<input type="checkbox" id="vehicle3ID" name="vehicle3" value="Boat">
<label for="vehicle3ID"> Imam brod</label><br><br>
<input type="submit" value="Pošalji">
</form>
Prikaz u browseru:
 |
3. Atributi form elementa mogu biti:
<form action="/prihvati_podatke.php" target="_blank"> - Kad se klikne na Pošalji otvara se novi TAB u browser-u.
<form action="/prihvati_podatke.php" method="get"> - Podaci se šalju GET metodom, tj podaci kojse šalju će biti vidljivi u http adresi.
<form action="/prihvati_podatke.php" method="post"> - Podaci se šalju POST metodom, za razliku od GET metode, podaci se ne vide u http adresi.
<form action="/action_page.php" autocomplete="on"> - Podaci će se automatski popuniti ako su nekada ranije uneli u ovou formu ili neku drugu formu.
4. Input element HTML tipa text:
<input type="text" id="fname" name="fname"> - Unosi se tekst
5. select element HTML forme, prikazuje se kao drop-down lista:
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
6. select element HTML forme sa predefinisanom vrednošću:
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="fiat" selected>Fiat</option>
</select>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
8. Ako u select elementu dodamo atribut multiple, moćićemo da izaberemo više od jedne vrednosti:
<select id="cars" name="cars" size="4" multiple>
9. textarea element omogućava unošenje teksta u više rečenica:
<textarea name="message" rows="10" cols="30">
Tekst u vises redova.
</textarea>
10. Dodavanje dugmeta. Kad se klikne izvršiće se JavaScript funkcija:
<button type="button" onclick="alert('Hello World!')">Klikni me!</button>
11. Tip password će prikazivati ****** umesto unetog teksta:
<input type="password" id="pwd" name="pwd">
12. Dodavanje dugmeta za reset unetih podataka:
<input type="reset">
13. Forma sa tipom radio
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
14. Forma za izbor boje:
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
15. Forma za izbor datuma:
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
16. Forma za izbor datuma u određenom periodu:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
17. Forma za unos datuma i vremena:
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
18. Forma za unos email-a:
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
19. Forma za selektovanje fajla sa računara. Prosleđuje naziv fajla:
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
20. Forma sa skirvenim poljem. Prosleđuje value vrednost:
<form>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
21. Forma za izbor meseca:
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
22. Forma za izbor broja:
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
ili
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
23. Forma za unos opsega:
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
24. Forma za pretragu:
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
25. Forma za unos telefona
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
26. Forma za izbor vremena
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
27. Forma za unos http linka
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
29. Forma za unos nedelje
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
30. Forma sa readonly poljem:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
31. Forma sa disabled poljem. Ovo polje se ne prosleđuje php stranici.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
32. U ovoj form je text polje odrežene veličine:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
33. U ovoj formi se podešava maksimalno dozvoljena vrednost polja:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
34. Forma koja omogućava selektovanje više fajlova:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
35. Forma koja proverava da li su polja samo velika i mala slova:
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
36. Forma sa placeholder-om i pattern-om
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
37. Forma sa obaveznim poljem za unos:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
No comments:
Post a Comment