CV forma – html/css dio

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

Odgovori

Vaša adresa e-pošte neće biti objavljena.

Previous post Kako koristiti Sqlite preko PHP PDO sučelja?
Next post CV forma – js dio