How to create Application Form use to Html and Css || how to use html and Css in mobile
APPLICATION FORM
<form id="applicationForm">
<label for="name">1.NAME-INCAPITAL LETTER</label>
<input type="text" id="name" name="name" required >
<label for="fathersName">2.FATHERS NAME-INCAPITAL LETTER</label>
<input type="text" id="fathersName" name="fathersName" required>
<label for="mothersName">3.MOTHERS NAME-INCAPITAL LETTER</label>
<input type="text" id="mothersName" name="mothersName" required>
<label for="dob">4.DATE OF BIRTH (D D MM YYYY)</label>
<input type="date" id="dob" name="dob" required>
<label for="sex">5.SEX</label>
<select id="sex" name="sex" required>
<option value="male">MALE</option>
<option value="female">FEMALE</option>
</select>
<label for="highestQualification">6.HIGHEST QUALIFICATION:</label>
<select id="highestQualification" name="highestQualification" required>
<option value="below10th">Below 10th</option>
<option value="10thPass">10th Pass</option>
<option value="10PlusTwo">10+2</option>
<option value="10PlusITI">10+ITI</option>
<option value="Poleytechnicdip">Poleytechnic diploma</option>
<option value="Graduation">Graduation or higher</option>
</select>
<label for="address">7. ADDRESS DETAILS</label>
<input type="text" id="address" name="address" required>
<label for="district">District/State</label>
<input type="text" id="district" name="district">
<label for="Adhar No.">Adhar No.</label>
<input type="text" id="Adhar" required>
<label for="telephone">Telephone / Mobile Number</label>
<input type="text" id="Mobilenumber">
<label for="PIN CODE">PIN CODE</label>
<input type="text" id="Pincode">
<br><br>
<h4 class="Signature"><pre>
Co-ordinator Signature of Application
</pre>
</h4>
<h3 class="Office">For Office Use Only</h3>
<h5><pre>
Course ....................................Date of Joining ..............................
Regb.No. ....................Roll No. ......................Timing ......................
Receipt No. ............. Receipt Date ................Amount Receipt ...................
Receipt by ................
</pre></h5>
<button type="submit">SUBMIT</button>
CSS CODE
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
label {
display: block;
margin-top: 20px;
font-size: 16px;
}
input[type="text"],
select {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
select , input[type="date"] {
appearance: none;
-webkit-appearance: none;
}
#Adhar{
width: 50%;
}
#district{
width: 80%;
}
#Mobilenumber {
width: 40%;
}
#Pincode{
width:20%;
}
h4{
border-bottom: 2px dotted;
}
h3{
margin-left: 30%;
}
.Office{
background: red;
color: white;
width: 200px;
border-radius: 5px;
display: flex;
justify-content: center;
}
h5{
margin-right: 200px;
font-size: 10px;
}
button{
width: 150px;
height: 40px;
border-radius:20px;
letter-spacing: 1.5px;
border: none;
font-weight: bold;
cursor: pointer;
}
button:hover{
width:80px;
background: red;
box-shadow:0 0 30px red;
color: white;
cursor: pointer;
}
button:active{
transform: translateY(4px);
background-color: greenyellow;
box-shadow:0 0 30px greenyellow;
}
Comments
Post a Comment