form felder mit require
require sind Plichtfelder , die so ausgefüllt werden wofür sie auch da sind.
Der hier verwendete Code
<html data-lt-installed="true"><head>
<title>Frickl - SELFHTML-Wiki</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html{
height:100vh;
width:100vw;
}
form {
max-width:300px;
margin:auto auto;
border: 1px solid;
padding:10px;
display:flex;
flex-direction:column;
}
label {
width:47%;
}
.column{
display:flex;
}
input {
padding: .5em;
background-color: #fffbf0;
border: 1px solid #e7c157;
width: 47%;
}
input:invalid {
border: 1px solid red;
}
</style>
<script>
</script>
</head>
<body>
<h1>Formular für einfaches Login</h1>
<main>
<form>
<div class="column">
<label for="mail">E-Mail </label>
<input id="mail" type="email" name="yourname" titel="das ist ein Basti Text" oninvalid="this.setCustomValidity('hau nee Adresse rein die passt')" require>
</div>
<div class="column">
<label for="passwd">Passwort </label>
<input id="passwd" type="password" name="password" titel="ggg" oninvalid="this.setCustomValidity('So ein Passwot kann nie Valide sein')" require>
</div>
<div class="column">
<label>
<button type="reset">Felder leeren</button> </label>
<button type="submit">absenden</button>
</div>
</form>
</main>
</body></html>