Radi se o CV formi. Znači treba nam forma koja će uzeti podatke potencijalnoga zaposlenika i njezin/njegov životopis. Životopis je u pdf formatu, što znači da će ga trebati “prikvačiti” na email privitak.
Završeni template izgleda ovako. A osim HTML-a imamo i odvojene djelove sa Javascript i PHP .
Prvo ćemo izraditi frontend dio. Stranica će možda biti dio WordPressa a možda i samo obična HTML stranica. Pošto ne znamo koji će (i da li će uopće) biti pod nekim od CSS framework-a (npr. Bootstrap) u WordPress temi, napisati ćemo cijeli HTML template iznova.
Za tipografski dio, koristimo Open Sans font sa Google Fonts-a. Pa ćemo ubaciti:
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
Nakon toga, “ravnamo” i resetiramo sve.
Za to koristimo “normalize” dio CSS koda iz w3.css framework-a.
html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}figure{margin:1em 40px}img{border-style:none}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
Usput pravimo elemente koje ćemo koristiti.
h1,h2,h3,h3,h5,h6 {font-family: Open Sans; font-weight: 800; color:#666;}
.margin{margin:16px!important}
.padding{padding:8px 16px!important}
.container{padding:16px 16px; margin-top:16px; margin-bottom:16px;}
.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.auto{width:auto;height:auto; display:ruby; }
.tab{padding-left: 32px;}
.center{display: flex; justify-content: center; align-items: center;}
p{ font-weight: 300;}
Cijela stranica sada izgleda ovako:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>CV forma</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<style>
* {font-family: Open Sans; font-size: 18px; font-weight: 400;}
html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}figure{margin:1em 40px}img{border-style:none}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
button{color:white;background:red;border-radius:;border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap}
button:hover{border-radius:;color:#000!important;background-color:#ccc!important}
h1,h2,h3,h3,h5,h6 {font-family: Open Sans; font-weight: 800; color:#666;}
.margin{margin:16px!important}
.padding{padding:8px 16px!important}
.container{padding:16px 16px; margin-top:16px; margin-bottom:16px;}
.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.auto{width:auto;height:auto; display:ruby; }
.tab{padding-left: 32px;}
.center{display: flex; justify-content: center; align-items: center;}
p{ font-weight: 300;}
</style>
<body>
<div class="container">
<h1>CV forma</h1>
<p> Sva polja su obavezna. </p>
<form accept-charset="UTF-8" action="endpoint.php" method="POST" enctype="multipart/form-data" target="_blank">
<div>
<input type="text" name="Ime" placeholder="Ime" required="required">
</div>
<br>
<button type="submit" >Submit</button>
</form>
</div>
</body>
</html>
See the Pen CV Forma 01 by Damir Sijakovic (@dsijak) on CodePen.
Checkbox i Radiobox
Osim uobičajenih elemenata forme, trebamo Checkbox i Radiobox. Budući da
obični elementi baš i nisu atraktivni, koristiti ćemo već gotove HTML/CSS
elemente sa w3schools-a.
Sada naš prilagođeni CSS izgleda ovako (bez optimizacija):
See the Pen CV Forma 02 by Damir Sijakovic (@dsijak) on CodePen.
ID
“id” HTML atribut dodajemo elementima čiju vrijednost ili stanje želimo znati. Kao format imenovanja koristimo “ds-tip-funkcija” ili “ds-tip-naziv”. To radimo da izbjegnemo duple id-e i da ime samo sebe objašnjava.
Id nam treba zbog “dokument.getElementById” metode. Sa tom metodom “nišanimo” HTML element s kojim želimo raditi u Javascriptu.
minlength i maxlength
Jedna bitna stvar koju smo zaboravili dodati su ‘minlength’ i ‘maxlength’ atributi. S njima ograničavamo minimalnu i maksimalnu veličinu unesenog teksta. To je korisno, na primjer, kod unosa zaporke gdje postoji pravilo da njezina veličina mora biti veća od 8 znakova.
<input minlength="8" maxlength="256">
Tel tip atribut
Tel tip HTML input-a je, pogodili ste, za unos broja telefona. Ovdje koristimo pattern atribut da ograničimo unos samo na brojeve u ovom formatu: “123 123 1234”.
<input type="tel" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" placeholder="Broj mobitela, format: 888 888 8888" maxlength="12" >
PDF FILE UPLOAD
Sada bi trebalo osposobiti file selector ili izbornik datoteka (ili kako već). Uglavnom radi se o gumbu koji bi trebao izabrati životopis datoteku u pdf formatu. Naravno opet se bacamo na tražilicu sa pojmom “w3 select files”.
w3schools primjer je dovoljan.
Nas zanima ovaj sa samo jednom selektiranom datotekom:
<h3>Show a file-select field which allows only one file to be chosen:</h3>
<form action="/action_page.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>
Ili specifičnije samo ovaj dio:
<input type="file" id="myfile" name="myfile">
Naša forma sada izgleda ovako:
<div class="form-group">
<div style="color:gray"> Vaš životopis </div>
<div style="display:flex;">
<button type="button" onclick="console.log('load-pdf')">Učitaj</button>
<div style="margin-right: 16px;"></div>
<input id="ds-input-zivotopis" type="file" name="file-zivotopis" placeholder="Priložite datoteku u PDF formatu" required="required">
</div>
</div>
Baš i nije atraktivan izgled kontrole. Da to popravimo, iskoristiti ćemo jedan javascript trik. Input ćemo sakriti sa style=”display:none”, dodajemo još jedan input element a sa “Učitaj” gumbom targetamo skriveni
element i njemu izvodimo click event. Nakon click eventa uzimamo naziv izabrane datoteke i dodajemo ga u vidljivi input.
<div class="form-group">
<div style="color:gray"> Vaš životopis </div>
<div style="display:flex;">
<button type="button" onclick="document.getElementById('ds-input-zivotopis-skriveno').click()">Učitaj</button>
<div style="margin-right: 16px;"></div>
<input id="ds-input-zivotopis-skriveno" name="file-zivotopis-upload" type="file" accept=".pdf" style="display:none" onchange="document.getElementById('ds-input-zivotopis').value = this.files[0].name;" required="required">
<input id="ds-input-zivotopis" type="text" name="file-zivotopis" placeholder="Priložite datoteku u PDF formatu" maxlength="320" required="required">
</div>
</div>
See the Pen CV Forma 04 by Damir Sijakovic (@dsijak) on CodePen.
Message – poruka
Poruke nam trebaju da nas obavijeste o pogrešnom unosu u formu, greškama pri prebacivanju podataka na serveru i na kraju uspješnom preuzimanju podataka.
Element ćemo postaviti na “position:fixed;” css property, tako da uvijek bude vidljiv. Na njega ćemo ugraditi mali X gumb koji će sakriti element poruke.
CSS:
#ds-message{
color: white;
background: black;
position: fixed;
bottom: 0px;
right: 0px;
margin: 16px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
user-select: none;
cursor: context-menu;
}
#ds-message #ds-message-text{
padding: 16px;
font-size: 14px;
}
#ds-message h1{
padding: 0px 120px 0px 0px;
margin: 0px 0px 16px 0px;
font-size: 18px;
color: #fff;
opacity: .50;
}
#ds-message button{
position: absolute;
right: 0px;
z-index: 1000;
}
.animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
HTML:
<div id="ds-message" class="animate-bottom">
<button type="button" onclick="document.getElementById('ds-message').style.display='none'"><b>×</b></button>
<div id="ds-message-text" > <h1>Pogreška</h1> Nešto nije u redu! </div>
</div>
Forma bez funkcije
I na kraju smo dobili cijelu “formu bez funkcije”:
See the Pen CV Forma 05 by Damir Sijakovic (@dsijak) on CodePen.
Javascript dio
U nastavku radimo JS dio…