iva/oss-vaja1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

urejeni inputi da so vsi poravnani in zaobljeni, poravnani tudi radio in checkbox

Browse Source
This commit is contained in:
iva
2026-10-28 20:15:36 +01:00
parent 325a5cabb9
commit 296ec5edaf
2 changed files with 67 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rezervacija.html
+39 -34
View File
@@ -48,20 +48,11 @@
<legend>Podrobnosti rezervacije:</legend> <legend>Podrobnosti rezervacije:</legend>
Datum obiska Datum obiska
<br>
<input type="date" id="datum-obiska" name="datum-obiska" required> <input type="date" id="datum-obiska" name="datum-obiska" required>
<br>
<br>
Ura obiska Ura obiska
<br>
<input type="time" id="ura-obiska" name="ura-obiska" min="10:00" max="21:00" required> <input type="time" id="ura-obiska" name="ura-obiska" min="10:00" max="21:00" required>
<br>
<br>
Število oseb Število oseb
<br>
<input type="number" min="1" max="11" id="stevilo-oseb" name="stevilo-oseb" required> <input type="number" min="1" max="11" id="stevilo-oseb" name="stevilo-oseb" required>
<br>
<br>
Prostor: Prostor:
<select id="prostor" name="prostor"> <select id="prostor" name="prostor">
<option value="notranjost">Notranjost</option> <option value="notranjost">Notranjost</option>
@@ -69,43 +60,57 @@
<option value="zasebna-soba">Zasebna soba</option> <option value="zasebna-soba">Zasebna soba</option>
</select> </select>
</fieldset> </fieldset>
<br>
<br>
<fieldset class="field_rezervacija"> <fieldset class="field_rezervacija">
<legend>Osebni podatki:</legend> <legend>Osebni podatki:</legend>
Ime in priimek Ime in priimek
<br>
<input type="text" id="ime-priimek" name="ime-priimek" required> <input type="text" id="ime-priimek" name="ime-priimek" required>
<br>
<br>
E-poštni naslov E-poštni naslov
<br>
<input type="email" id="email" name="email" required> <input type="email" id="email" name="email" required>
<br>
<br>
Telefonska številka Telefonska številka
<br> <input type="tel" id="telefon-st" name="telefon-st" placeholder="022-333-444" pattern="[0-9]{3}[0-9]{3}[0-9]{3}" required>
<input type="tel" id="telefon-st" name="telefon-st" placeholder="022-333-444" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" required> Priložnost <br>
<div class="opcije">
<div class="opcije_radio">
<input type="radio" id="brez" name="priloznost" value="brez">
<label for="brez">Brez</label>
</div>
<div class="opcije_radio">
<input type="radio" id="rojstni-dan" name="priloznost" value="rojstni-dan">
<label for="rojstni-dan">Rojstni dan</label>
</div>
<div class="opcije_radio">
<input type="radio" id="obletnica" name="priloznost" value="obletnica">
<label for="obletnica">Obletnica</label>
</div>
<div class="opcije_radio">
<input type="radio" id="poslovno-srecanje" name="priloznost" value="poslovno-srecanje">
<label for="poslovno-srecanje">Poslovno srečanje</label>
</div>
</div>
</fieldset> </fieldset>
<br> <br>
<br> <br>
<fieldset class="field_rezervacija"> <fieldset class="field_rezervacija">
<legend>Dodatne želje:</legend> <legend>Dodatne želje:</legend>
Priložnost Posebne omejitve <br>
<br> <div class="opcije">
<input type="radio" id="brez" name="priloznost" value="brez"> Brez <div class="opcije_checkbox">
<input type="radio" id="rojstni-dan" name="priloznost" value="rojstni-dan"> Rojstni dan <input type="checkbox" id="vegan" name="posebne-omejitve" value="vegan">
<input type="radio" id="obletnica" name="priloznost" value="obletnica"> Obletnica <lable for="vegan">Vegansko</lable>
<input type="radio" id="poslovno-srecanje" name="priloznost" value="poslovno-srecanje"> Poslovno srečanje </div>
<br> <div class="opcije_checkbox">
<br> <input type="checkbox" id="vegetarijan" name="posebne-omejitve" value="vegetarijan">
Posebne omejitve <br> <lable for="vegetarijan">Vegetarjansko</lable>
<input type="checkbox" id="vegan" name="posebne-omejitve" value="vegan"> Vegansko </div>
<input type="checkbox" id="vegetarijan" name="posebne-omejitve" value="vegetarijan"> Vegetarjansko <div class="opcije_checkbox">
<input type="checkbox" id="gluten" name="posebne-omejitve" value="gluten"> Brez glutena <input type="checkbox" id="gluten" name="posebne-omejitve" value="gluten">
<input type="checkbox" id="laktoza" name="posebne-omejitve" value="laktoza"> Brez laktoze <label for="gluten">Brez glutena</label>
<br> </div>
<br> <div class="opcije_checkbox">
<input type="checkbox" id="laktoza" name="posebne-omejitve" value="laktoza">
<label for="laktoza">Brez laktoze</label>
</div>
</div>
Opombe Opombe
<br> <br>
<textarea id="opombe" name="opombe" rows="5" cols="50"> </textarea> <textarea id="opombe" name="opombe" rows="5" cols="50"> </textarea>
stylesheet.css
+28
View File
@@ -618,6 +618,10 @@ footer p {
border-radius: var(--zaobljenost); border-radius: var(--zaobljenost);
border:none; border:none;
border-top:0.3rem solid var(--barva-poudarek); border-top:0.3rem solid var(--barva-poudarek);
display:grid;
grid-template-columns: 1fr 2fr;
gap:1rem;
padding: 2rem;
} }
.field_rezervacija legend { .field_rezervacija legend {
@@ -629,6 +633,16 @@ footer p {
padding: 0.5rem; padding: 0.5rem;
} }
.field_rezervacija input,
.field_rezervacija select {
border-radius: var(--zaobljenost);
height: 2rem;
padding:0.5rem;
font-family: "Montserrat", sans-serif;
}
.field_rezervacija:focus-within { .field_rezervacija:focus-within {
border-top:0.3rem solid var(--barva-dodatna); border-top:0.3rem solid var(--barva-dodatna);
} }
@@ -637,3 +651,17 @@ footer p {
background-color: var(--barva-dodatna); background-color: var(--barva-dodatna);
color: var(--barva-besedilo); color: var(--barva-besedilo);
} }
.opcije {
display: flex ;
flex-direction: row;
justify-content: space-between;
}
.opcije_radio,
.opcije_checkbox {
display:flex;
gap: 1rem;
align-items: center;
}