Input valid invalid HTML CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <title>INPUT VALID INVALID HTML CSS | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="INPUT VALID INVALID HTML CSS">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body class="container">
    <div class="row">
		<form class="col-lg-6 col-12 mt-5">
			<div class="form-group">
				<label for="inputname" class="bold"><i class="fa fa-user"></i> Nom:</label>
				<input 
				class="form-control"
				type="text" 
				name="inputname" 
				id="inputname"
				placeholder="Entrez votre name" >
			</div>
			<div class="form-group">
				<label for="inputnamevalidation" class="bold"><i class="fa fa-user"></i> Nom (validation):</label>
				<input 
				class="form-control"
				type="text" 
				name="inputnamevalidation" 
				id="inputnamevalidation"
				maxlength="100" 
				minlength="4"
				pattern=".{4,100}"
				title="Votre nom doit contenir entre 4 et 100 caractéres" 
				placeholder="Entrez votre nom" 
				required>
			</div>
			<hr>
			<div class="form-group">
				<label for="email" class="bold"><i class="fa fa-envelope"></i> Email:</label>
				<input 
				class="form-control"
				type="email" 
				name="email" 
				placeholder="Entrez votre login" >
			</div>
			<div class="form-group">
				<label for="emailvalidation" class="bold"><i class="fa fa-envelope"></i> Email (validation):</label>
				<input 
				class="form-control"
				type="email" 
				name="emailvalidation" 
				maxlength="100" 
				minlength="4"
				pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
				title="Votre format email est invalide" 
				placeholder="Entrez votre login" 
				email required>
			</div>
		</form>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
} 
body {
    padding: 3em;
}
.bold {
    font-weight: bold;
}
input:invalid {
    border:1px solid #F07355;
}  
input:valid {
    border:1px solid #02AB83;
}  

::-webkit-input-placeholder { /* Edge */
    color: #858383;
    font-size: 12px;
    font-weight: 600;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #858383;
    font-size: 12px;
    font-weight: 600;
}
::placeholder {
    color: #858383;
    font-size: 12px;
    font-weight: 600;
}

                                    
Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Bloc resizable with jquery

Bloc resizable with jquery

Card Bootstrap4 01

Card Bootstrap4 01

Carousel Bootstrap3

Carousel Bootstrap3

Image hover 04

Image hover 04

Image hover 06

Image hover 06

Pie Charts

Pie Charts

Simple Table With UIKIT

Simple Table With UIKIT

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Vers le haut

Vers le haut

input file récupérer le nom du fichier

input file récupérer le nom du fichier