<?php
// define variables and set to empty values
$word = "";
$wordErr = "";
function cleanInput($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
if (empty($_POST["name"])) {
$nameErr = "Please enter a word";
} else {
$word = cleanInput($_POST["name"]);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>French Gender Teller</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:900" rel="stylesheet">
<style type="text/css">
body {
background-color: #89bdd3;
color: #ffffff;
}
h1{
font-family: 'Raleway', sans-serif;
}
.jumbotron {
margin-top: 10px;
background-color: #9ad3de;
}
form{
margin-top: 15px;
}
.btn {
color: #e3e9e9;
}
.btn:hover {
color: #ffffff;
background-color: #e3e9e9;
}
label{
display: inline;
font-size: 22px;
height: 3em;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>French <span style="color:#e3e3e3;">Gender</span> Teller</h1>
<h3>Enter the word whose gender you want:</h3>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="form-group">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-2">
<label for="name">Word:</label>
</div>
<div class="col-md-11 col-sm-11 col-xs-10">
<input type="name" class="form-control" id="name" name="name">
<span class="error">* <?php echo $wordErr;?></span>
</div>
</div>
</div>
<button type="submit" class="btn btn-default btn-block">Submit</button>
</form>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('input.nospace').keydown(function(e) {
if (e.keyCode == 32) {
return false;
}
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.