Verde/form
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form creato, basta?

Browse Source
This commit is contained in:
La Programmatrice Verde 2024-12-02 20:18:32 +01:00
parent 755de8ed11
commit f988e3781d
3 changed files with 94 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
index.html
View File

@ -2,22 +2,68 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Lorem Ipsum</title>
<link rel="icon" href="some icon">
<link rel="stylesheet" href="/style.css">
<title>Appuntamento d'amore con La Programmatrice Verde</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1><strong><center>Main title</center></strong></h1>
<h2><small><center>Main subtitle</center></small></h2>
<center><p>Description of the page</p></center>
<h3>List:</h3>
<ul>
<li><a href="some URL" alt="text shown when you hover the cursor over the link">Item 1</a> some description</li>
<li><a href="some URL" alt="text shown when you hover the cursor over the link">Item 2</a> some description</li>
<li><a href="some URL" alt="text shown when you hover the cursor over the link">Item 3</a> some description</li>
</ul>
<br>
<p><center><small><a href=/. alt=home>Home</a>|Built by La Programmatrice Verde aka BrainTheBest5</small></center></p>
<p><center><small><a href="https://github.com/BrainTheBest5" alt="GitHub">GitHub</a></small></center></p>
<h1>Appuntamento d'amore con La Programmatrice Verde</h1>
<p>Per favore inserire tutte le vostre informazioni, più ne inserite più speranze avrete di venire accettat</p>
<form class="form">
<div class="input_field required">
<label>
Nome:
<input class="input" id="nome" type="text" pattern="[A-Z]{1}[a-z]{1,}" required>
<p class="tip">Campo obbligatorio</p>
<br>
</label>
</div>
<div class="input_field">
<label for="cognome">Cognome: </label>
<input class="input" id="cognome" type="text" pattern="[A-Z]{1}[a-z]{1,}">
<br>
</div>
<div class="input_field">
<label for="età">Età: </label>
<input class="input" id="età" type="number">
<br>
</div>
<div class="input_field">
<label for="AMAB">Ragazzo</label>
<input class="input" type="radio" id="AMAB" name="sesso">
</div>
<div class="input_field">
<label for="AFAB">Ragazza</label>
<input class="input" type="radio" id="AFAB" name="sesso">
</div>
<div class="input_field required">
<label>
Numero di telefono:
<input class="input" type="tel" pattern="[+]{1}[0-9]{1,3}[\s]{1}[0-9]{3}[-]{1}[0-9]{3}[-]{1}[0-9]{4}" placeholder="+39 123-456-7890" required>
<p class="tip">Campo obbligatorio</p>
<br>
</label>
</div>
<div class="input_field">
<label for="email">Email: </label>
<input class="input" type="email" id="email" placeholder="tuamamma@casamia.it">
<br>
</div>
<div class="input_field">
<label for="url">Blog: </label>
<input class="input" type="url" id="url"
<br>
</div>
<div class="input_field required">
<label>
Data dell'appuntamento:
<input class="input" type="datetime-local" required>
<p class="tip">Campo obbligatorio</p>
<br>
</label>
</div>
<div class="submit">
<input type="image" value="Iscriviti" src=fileepicodelbottone>
</div>
</form>
</body>
</html>

19
mystyle.css
View File

@ -0,0 +1,19 @@
@import "validation.css";
body{
background-color: rebeccapurple;
color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 20px 0 0 20px;
}
.input_field{
padding: 5px;
}
.form{
display: inline-block;
background-color: blueviolet;
width: 20%;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 20px;
}

14
validation.css Normal file
View File

@ -0,0 +1,14 @@
.input:user-invalid{
color: red;
}
.input:user-valid{
color: green;
}
div.required label .tip{
opacity: 0;
}
div.required label:hover .tip{
opacity: 1;
}