XBXJ

file con codice html
css (fogli di stile) per parte grafica pagine

file javascript estensione js (logica funzionamento pagina)
Usiamo Notepad++ come editor di testo
Bootstrap toolkit per facilitare l’uso dei css (insieme di comandi)
Framework o toolkit sono una libreria di comandi
grazie a “flex” il layout può cambiare in base al tipo di monitor usato, ad
esempio un telefono.(flex è contenuto dentro il toolkit bootstrap)
Con il comando “id” si può andare a lavorare sull’informazione inserita.
In css le colonne sono divise in 12 parti per linea; con <div class=”col-6”> si va
a formare uno spazio da 6 unità su 12.
Con “form-control” si può controllare se un’informazione data ha una specifica
cosa. Per farlo bisogna specificare cosa bisogna trovare con “type” e
specificare, dopo “form-control”, dove cercare con “id”.
.
<!doctype.html>
<html lang=”it" class="h-100">
<head>
<meta charset="utf-8">
<title>Esempio accesso autenticato</title>

<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0"
<div class="container">
<h1 class="mt-5 text-danger">Benvenuto</h1>
<p class="lead">Per visualizzare i contenuti fai il login.</p>
<form id="mioform">
<div class="row">
<div class="col-6">
<label for="username" class="form-label">Username:</label>
<input type="email" class=”form -control" id="username" />
</div>
<div class="col-6">
<label for="password" class="form-label">Password:</label>
<input type="password" class="form-control" id="password" />
</div>
</div>
<div class="row mt-2">
<div class="col-12 d-grid">
<button type="submit" class="btn btn-primary">Accedi</button>
</div>
</div>
</form>
<div id="segreto" class="d-none">
<div class="mt-5 bg-black text-white">
<p>Questo è un segreto!</p>
</div>
</div>
</div>
</main>
<script src="js/mialogica.js"></script>
</body>
</html>
in javascript === serve per confrontare
finestra modale è una finestra che non ti fa interagire con il sito finché non
viene chiusa e per farla apparire si usa “alert”
Javascript:
window.onload = function () {
document.getElementById ("mioform").onsubmit = login;
};
function login(event){
event.preventDefault();
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
if(username === "admin@sito.it" && password === "admin") {
alert("Login corretto");
document.getElementById("segreto").className="";
}else{
alert("Login errato");
document.getElementById("segreto").className="d-none";
}
}
alert fa uscire una finestra modale.

<!doctype.html>
<html lang="it" class="h-100">
<head>
</head>
<main class="flex-shrink-0"
<h1 class="mt-5 text-danger">Benvenuto</h1>
<p class="lead">Per visualizzare i contenuti fai il login.</p>
<form id="mioform">
<div class="row">
<div class="col-6">
<input type="email" class="form-control" id="username" />
</div>
<div class="col-6">
</div>
</div>
<button type="submit" class="btn btn-primary">Accedi</button>
</div>
</div>
</form>
<p>Questo è un segreto!</p>
</div>
</div>
</div>
</main>
<script src="js/SitoScary.js"></script>
</body>
</html>
<!doctype.html>
<html lang=it" class="h-100">
<head>
-</head>
<main class="flex-shrink-0">
<h1 class="mt-10 text-warning">Benvenuto</h1>
<p class="lead">Per visualizzare i contenuti inserisci le tue credenziali.</p>
<form id="mioform">
<div class="row">
<div class="col-6">
<input type="email" class="form-control" id="username" />
</div>
<div class="col-6">
</div>
</div>
<button type
="submit" class="btn btn-danger">Accedi</button>

</div>
</div>
</form>
<p>contenuti non disponibili!</p>
</div>
</div>
</div>
</main>
<script src="js/mialogica.js"></script>
</body>

XBXJ

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

XBXJ

Caricato da

Copyright:

Formati disponibili

file con codice html

css (fogli di stile) per parte grafica pagine

alert fa uscire una finestra modale.

="submit" class="btn btn-danger">Accedi</button>

Potrebbero piacerti anche