Mafunzo yanayorekomenda:
- Pya za zamani Fomu ya kichatia
- Pya zaidi Kusafisha kifunguni cha kuingia
Jinsi ya kumaliza: Foromu inayotumia rangi
Foromu inayotumia rangi inayoresha
Tungania ukanda wa kifungu cha kifunguni kusoma mafanikio (kifungu na kufikia kizitoa vizuri kama kwenye ekran yenye ukanda mdogo hauwezi kufikia kwa kuelekea kwa kina kwenye ekran kikubwa):
Jinsi ya kumaliza foromu inayotumia rangi
Kinyume cha kwanza - Ongeza HTML:
Tumia <form> ina kusoma hali ya kufikia. Unaweza kusoma mafunzo yetu ya PHP kwa mafanikio ya zaidi.
<form class="form-inline" action="/action_page.php">
<label for="email">Barua pepe:</label>
<input type="email" id="email" placeholder="Ingiza barua pepe" name="email">
<label for="pwd">Neno la siri:</label>
<input type="password" id="pwd" placeholder="Ingiza neno la siri" name="pswd">
<label>
<input type="checkbox" name="remember"> Kusomwa hivi
</label>
<button type="submit">Submit</button>
</form>
Kipindi cha pili - Kuingiza CSS:
/* Kuingiza muundo wa kufanya kwa formu - kusoma kwa kipenyo cha kimo */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Kuingiza muda wa kubadilika kwa kila label */
.form-inline label {
margin: 5px 10px 5px 0;
}
/* Kuingiza muundo wa kufanya kwa eneo la kuingiza data */
.form-inline input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* Kuingiza muundo wa kufanya kwa butoni ya kufanyisha */
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
}
.form-inline button:hover {
background-color: royalblue;
}
/* Kuingiza uwezo wa kumaliza - kusoma kwa kipenyo cha kimo cha kutosha ya 800 mita kwa uwezo wa kufikiria kwenye ujauzito wa kimo bila ya kufikiria kwenye ujauzito wa kifungu kwa uwezo wa kumaliza cha 800 mita */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
Paje za kikapteni
Mafunzo:Kuhusu: Fomu za HTML
Mafunzo:Kuhusu: Fomu za CSS
- Pya za zamani Fomu ya kichatia
- Pya zaidi Kusafisha kifunguni cha kuingia
