Name: Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
Address: Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0762103668
Price range: $$$

By GokiSoft.com| 20:11 17/02/2022|

Học JS

Bài tập - Form vay tiền - Lập trình Javascript

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Nguyễn Xuân Mai

2020-10-23 04:04:35

<!DOCTYPE html>
<html>
<head>
	<title>Purchase Order Form</title>
	<style type="text/css">
		.panel-heading{
			font-size: larger; 
			background-color: #ebbfbc;
			border: solid red 1px;
			width: 250px;
			font-weight: bold; 
			padding: 10px;
		}

		.panel-body{
			padding-top: 5px;
			padding-left: 5px;
			color: #373ae6;
			font-weight: bold;
		}

		.form-group{
			background-color: #ebbfbc;
			border: #5fe6f5 1px;
			border-spacing: 5;
			color: black;
			font-weight: normal;
			padding: 5px;
		}
	</style>
</head>
<body>
		<div class="panel-heading">Loan Application Form</div>
		<br>
		<fieldset style="border-color: brown">
			<legend class="panel-body">Applicant's Personal Information</legend>
			<div class="form-group">
				<table>
					<tr>
						<td>Fullname:</td>
						<td>
							<input type="text" name="name" id="fname" required="true">
						</td>
					</tr>
					<tr>
						<td>Date of Birth (mm/dd/yyyy):</td>
						<td><input type="date" name="dob" id="dob" required="true"></td>
					</tr>
					<tr>
						<td>Phone Number:</td>
						<td><input type="tel" name="phoneno" id="phoneno" required="true" minlength="10"></td>
					</tr>
					<tr>
						<td>Address:</td>
						<td><input type="text" name="add" id="add" required="true"></td>
					</tr>
					<tr>
						<td>ZIP Code:</td>
						<td><input type="text" name="zip" id="zip" required="true" onchange="onchange1()" placeholder="XXX-XXXX-XXX"></td>
					</tr>
				</table>
			</div>

		</fieldset>
		<br>
		<fieldset style="border-color: brown">
			<legend class="panel-body">Applicant's Employment Information</legend>
			<div class="form-group">
				<table>
					<tr>
						<td>Current Employer:</td>
						<td><input type="text" name="employer" id="employer"required="true"></td>
					</tr>
					<tr>
						<td>Employer Address:</td>
						<td><input type="text" name="emadd" id="emadd" required="true"></td>
					</tr>
					<tr>
						<td>Date of Joining (mm/dd/yyyy):</td>
						<td><input type="date" name="doj" id="doj" required="true"></td>
					</tr>
					<tr>
						<td>Phone Number:</td>
						<td><input type="tel" name="emphoneno" id="emphoneno" required="true" minlength="10"></td>
					</tr>
					<tr>	
						<td>Email ID:</td>
						<td><input type="email" name="email" id="email" required="true"></td>
					</tr>
					<tr>	
						<td>Fax:</td>	
						<td><input type="number" name="fax" id="fax" required="true"placeholder="XXX-XXXXXXX"></td>
					</tr>
					<tr>
						<td>Designation:</td>
						<td><input type="text" name="designation" id="designation" required="true"></td>
					</tr>
					<tr>
						<td>Annual Income:</td>
						<td><input type="number" name="income" id="income" required="true"></td>
					</tr>
				</table>
			</div>
		</fieldset>
		<br>
		<fieldset style="border-color: brown">
			<legend class="panel-body">Loans Information</legend>
			<div class="form-group">
				<table>
					<tr>
						<td>Loan Type:</td>
						<td><select id="loantype" required="true">
							<option>--Select--</option>
							<option>Personal Loan</option>
							<option>Home Loan</option>
							<option>Vehicle Loan</option>
							<option>Business Loan</option>
							<option>Education Loan</option>
						</select></td>
					</tr>
					<tr>
						<td>Principal($):</td>
						<td><input type="number" name="principal" id="principal" required="true"></td>
					</tr>
					<tr>
						<td>Period (Months):</td>
						<td><input type="number" name="period" id="period" required="true"></td>
					</tr>
					<tr>
						<td>Interest (%):</td>
						<td><input type="number" name="interest" id="interest" required="true"></td>
					</tr>
				</table>
				<button type="button">Submit</button>	
				<button>Reset</button>
			</div>
		</fieldset>
</body>
</html>

Nguyễn Tiến Đạt

2020-10-22 17:46:07

#vaytien.css

.top{
    width: 99%;
    height: auto;
    background-color: rgb(248, 213, 231);
    border: 1px solid palevioletred;
    font-size: 18px;
    font-weight: bold;
    padding-left: 10px;
}
.border1{
    margin-top: 40px;
    width: 99.56%;
    height: 139px;
    border: 2px solid palevioletred;
}
.border2{
    margin-top: 30px;
    width: 99.56%;
    height: 204px;
    border: 2px solid palevioletred;
}
.information1{
    width: 1491px;
    height: 112px;
    margin: 0 auto;
    margin-top: 12px;
    background-color: rgb(248, 213, 231);
}
.information2{
    width: 1491px;
    height: 178px;
    margin: 0 auto;
    margin-top: 12px;
    background-color: rgb(248, 213, 231);
    display: flex;
}
.col1{
    margin-left: 41px;
}
.col2{
    margin-left: 170.2px;
}
.col3{
    margin-left: 70px;
}
.col4{
    margin-left: 145px;
}
.col5{
    margin-left: 186px;
}
.col6{
    margin-left: 177px;
}
input.hiddenscrollbar::-webkit-outer-spin-button,
input.hiddenscrollbar::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
form{
    display: flex;
    margin: 0px;
}
.content{
    height: 100%;
    width: 243px;
    margin-left: 41px;
}
.box{
    height: 100%;
    width: 400px;
}
div.editchu{
   padding-bottom: 4px;
}

#vaytien.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loan Application</title>
    <link rel="stylesheet" href="vaytien.css">
    <script>
        var array1=document.getElementsByTagName('input')
        var array2=document.getElementsByTagName('select')
        function Submit() {
            for(i=0;i<array1.length-2;i++){
                if(array1[i].value==''){
                    alert('Please fullfill all information!!')
                    return
                }
            }
            for(i=0;i<array2.length;i++){
                if(array2[i].value==''){
                    alert('Please fullfill all information!!')
                    return
                }
            }
            if(countnumber!=0){
                alert('The phone number must have at least 10 numbers!!')
                return
            }
            if(countname!=0){
                alert('The full name must have at least one whitespace character!!')
                return
            }
            if(countzip!=0){
                alert('ZipCode must be defined as: XXX-XXXX-XXX. X is only number!!')
                return
            }  
            if(countfax!=0){
                alert('Fax must be defined as: XXX-XXXXXXX. X is only number!!')
                return
            }
            if(countemail!=0){
                alert('The email must have the form: example@gmail.com')
                return
            }  
            alert('Form has been completed!!')
        }
        function Reset() {
            for(i=0;i<array1.length-2;i++){
                array1[i].value=''
            }
            for(i=0;i<array2.length;i++){
                array2[i].value=''
            }
        }
        var countnumber=0
        function PhoneNumber11() {
            array1[2].value
        }
        function PhoneNumber12() {
            if(array1[2].value==''){
                return
            }
            if(array1[2].value.length<10){
                alert('The phone number must have at least 10 numbers!!')
                countnumber++
            }
            else{
                count=0;
            }
        }
        function PhoneNumber21() {
            array1[8].value
        }
        function PhoneNumber22() {
            if(array1[8].value==''){
                return
            }
            if(array1[8].value.length<10){
               alert('The phone number must have at least 10 numbers!!')
               countnumber++
            }
            else{
                count=0;
            }
        }
        var countname=0
        function FullName1() {
            array1[0].value
        }
        function FullName2() {
            if(array1[0].value==''){
                return
            }
            var check = RegExp(" ");
            if(check.test(array1[0].value)== false){
                alert('The full name must have at least one whitespace character!!')
                countname++
            }
            else{
                countname=0
            }
        }
        function ZipCode1() {
            var a=array1[4].value.split('')
            if(a.length==3){
                array1[4].value+='-'
            }
            var b=array1[4].value.split('')
            if(b.length==8){
                array1[4].value+='-'
            }
        }
        var countzip=0
        function ZipCode2(){
            if(array1[4].value==''){
                return
            }
            for(i=0;i<3;i++){
                if(isNaN(array1[4].value[i])){
                    alert('ZipCode must be defined as: XXX-XXXX-XXX. X is only number!!')
                    countzip++
                    return
                }
                else{
                    countzip=0
                }
            }
            for(i=4;i<8;i++){
                if(isNaN(array1[4].value[i])){
                    alert('ZipCode must be defined as: XXX-XXXX-XXX. X is only number!!')
                    countzip++
                    return
                }
                else{
                    countzip=0
                }
            }
            var check = RegExp(' ')
            if(check.test(array1[4].value)== true){
                alert('ZipCode must be defined as: XXX-XXXX-XXX. X is only number!!')
                countzip++
                return
            }
            else{
                countzip=0
            }
            if(array1[4].value.length!=12){
                alert('ZipCode must be defined as: XXX-XXXX-XXX. X is only number!!')
                countzip++
                return
            }
            else{
                countzip=0
            }
        }
        function Fax1() {
            var a=array1[10].value.split('')
            if(a.length==3){
                array1[10].value+='-'
            }
        }
        var countfax=0
        function Fax2(){
            if(array1[10].value==''){
                return
            }
            for(i=0;i<3;i++){
                if(isNaN(array1[10].value[i])){
                    alert('Fax must be defined as: XXX-XXXXXXX. X is only number!!')
                    countfax++
                    return
                }
                else{
                    countfax=0
                }
            }
            for(i=4;i<11;i++){
                if(isNaN(array1[10].value[i])){
                    alert('Fax must be defined as: XXX-XXXXXXX. X is only number!!')
                    countfax++
                    return
                }
                else{
                    countfax=0
                }
            }
            var check = RegExp(' ')
            if(check.test(array1[10].value)== true){
                alert('ZipCode must be defined as: XXX-XXXX-XXX. X is only number!!')
                countzip++
                return
            }
            else{
                countzip=0
            }
            if(array1[10].value.length!=11){
                alert('Fax must be defined as: XXX-XXXXXXX. X is only number!!')
                countfax++
                return
            }
            else{
                countfax=0
            }
        }
        
        function Email1() {
            array1[9].value
        }
        var countemail=0
        function Email2() {
            if(array1[9].value==''){
                return
            }
            var check = RegExp('@')
            var check1 = RegExp(' ')
            if(check.test(array1[9].value)== false || check1.test(array1[9].value)== true){
                alert('The email must have the form: example@gmail.com')
                countemail++
            }
            else{
                countemail=0
            }
        }
        function Select() {
            array2.value
        }
    </script>
</head>
<body>
    <div style="position: absolute;background-color: white;color: rgb(26, 75, 131);margin-top: 54px;margin-left: 16px;">Applicant's Personal Information</div>
    <div class="top">
        <div>Loan Application Form</div>
    </div>
    <div class="border1">
        <div class="information1">
            <form>
                <div class="col1">Full Name:</div>
                <div class="col2"><input onkeyup="FullName1()" onchange="FullName2()" type="text" style="width: 651px;" required></div>
            </form>
            <form>
                <div class="col1">Date of Birth (MM/dd/yy):</div>
                <div class="col3"><input type="date" style="width: 164px;" required></div>
            </form>
            <form>
                <div class="col1">Phone number:</div>
                <div class="col4"><input onkeyup="PhoneNumber11()" onchange="PhoneNumber12()" class="hiddenscrollbar" type="number" style="width: 206px;" required></div>
            </form>
            <form>
                <div class="col1">Address:</div>
                <div class="col5"><input type="text" style="width: 651px;" required></div>
            </form>
            <form>
                <div class="col1">ZIP Code:</div>
                <div class="col6"><input  onkeyup="ZipCode1()" onchange="ZipCode2()" type="text" style="width: 164px;"></div>
            </form>
        </div>
    </div>
    <div style="position: absolute;background-color: white;color: rgb(26, 75, 131);margin-top: 21px;margin-left: 16px;">Applicant's Employment Information</div>
    <div class="border2">
        <div class="information2">
            <div class="content">
                <div class="editchu">Current Employer:</div>
                <div class="editchu">Employer Address:</div>
                <div class="editchu">Date of Joining (DD/mm/yyyy):</div>
                <div class="editchu">Phone Number:</div>
                <div class="editchu">E-mail ID:</div>
                <div class="editchu">Fax:</div>
                <div class="editchu">Designation:</div>
                <div class="editchu">Income ($):</div>
            </div>
            <div class="box">
                <input type="text" style="width: 651px;" required>
                <br>
                <input type="text" style="width: 651px;" required>
                <br>
                <input type="date" style="width: 164px;" required>
                <br>
                <input onkeyup="PhoneNumber21()" onchange="PhoneNumber22()" class="hiddenscrollbar" type="number" style="width: 206px;" required>
                <br>
                <input onkeyup="Email1()" onchange="Email2()" type="email" style="width: 250px;" required>
                <br>
                <input type="text" onkeyup="Fax1()" onchange="Fax2()" style="width: 206px;" required>
                <br>
                <input type="text" style="width: 250px;" required>
                <br>
                <input class="hiddenscrollbar" type="number" style="width: 164px;" required>
            </div>
        </div>
    </div>
    <div style="position: absolute;background-color: white;color: rgb(26, 75, 131);margin-top: 23px;margin-left: 16px;">Loan Information</div>
    <div class="border1" style="margin-top: 33px;">
        <div class="information1" style="display: flex;">
            <div class="content">
                <div class="editchu">Loan Type:</div>
                <div class="editchu">Principal ($):</div>
                <div class="editchu">Period (Months):</div>
                <div class="editchu">Interest (%):</div>
            </div>
            <div class="box">
                <select onchange="Select()" style="width: 206px;" required>
                    <option value="">Select</option>
                    <option value="Personal Loan">Personal Loan</option>
                    <option value="Home Loan">Home Loan</option>
                    <option value="Vehicle Loan">Vehicle Loan</option>
                    <option value="Business Loan">Business Loan</option>
                    <option value="Education Loan">Education Loan</option>
                </select>
                <br>
                <input class="hiddenscrollbar" type="number" style="width: 206px;" required>
                <br>
                <input class="hiddenscrollbar" type="number" style="width: 206px;" required>
                <br>
                <input class="hiddenscrollbar" type="number" style="width: 206px;" required>
                <br>
                <div style="display: flex; margin-left: -20px;margin-top: 5px;">
                    <input onclick="Submit()" style="margin-right: 5px;" type="submit" value="Submit">
                    <input onclick="Reset()" type="reset" value="Reset">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

nguyễn Sử

2020-10-22 14:26:03

	<!DOCTYPE html>
	<html>
	<head>
		<title>Form vay tiền</title>
		<meta charset="utf-8">
		<style type="text/css">
			.panel{
				width: 60%;
				margin: 0 auto;
			}
			.top{
				text-align: left;
				background-color:#fadee9; color: black
				
			}
			.panel1{ 
				margin-right: 15px;
				background-color: #fadee9;
				padding: 5px;
				color: black;
				border: 1px;
			}
			.panel2{
				margin-right: 15px;
				background-color: #fadee9;
				padding: 5px;
				color: black;
				border: 1px;
			}
			.panel3{
				background-color: #fadee9;
				padding: 5px;
				color: black;
				border: 1px;
			}
			h4 {
				color: blue;
			}
			input{
				width: 200%;
			}
			body{
				margin-left: 30px;
			}
			select{
				margin-left: 35px;
			}
		</style>
	</head>
	<body>
		<!-- <div class="panel"> -->
			<div class="top">
				<p><h3> Loan Application Form </h3></p>
			</div>
			<div class="panel1">
				<h4> Applicant's Personal Information </h4>
				<table>
					<tr>
						<td>Full Name:</td>
						<td><input type="text" name="Full Name"></td>
					</tr>
					<tr>
						<td>Date of Birth(MM/dd/yyyy):</td>
						<td><input type="Date" name="Date of Birth(MM/dd/yyyy)"></td>
					</tr>
					<tr>
						<td>Phone Number:</td>
						<td><input type="number" name="Phone Number"></td>
					</tr>
					<tr>
						<td>Address:</td>
						<td><input type="text" name="Address"></td>
					</tr>
					<tr>
						<td>ZIP Code:</td>
						<td><input type="number" name="ZIP Code"></td>
					</tr>
				</table>
			</div>
			<!-- </div> -->
			<br>

			<div class="panel2">
				<h4> Applicant's Employment Information </h4>
				<table>
					<tr>
						<td> Current Emloyer:</td>
						<td><input type="text" name=" Current Emloyer"></td>
					</tr>
					<tr>
						<td> Employer Address:</td>
						<td><input type="text" name=" Employer Address"></td>
					</tr>
					<tr>
						<td> Date of joining(MM/dd/yyyy): </td>
						<td><input type="Date" name=" Date of joining(MM/dd/yyyy)"></td>
					</tr>
					<tr>
						<td> Phone Number:</td>
						<td><input type="Number" name="Phone Number"></td>
					</tr>
					<tr>
						<td> E-mail ID:</td>
						<td><input type="text" name="  E-mail ID"></td>
					</tr>
					<tr>
						<td>Fax:</td>
						<td><input type="text" name=" Fax"></td>
					</tr>
					<tr>
						<td> Designation: </td>
						<td><input type="text" name=" Designation"></td>
					</tr>
					<tr>
						<td>Annual Incom($):</td>
						<td><input type="Number" name="  Annual Incom($)"></td>
					</tr>
				</table>
			</div>
			<br>

			<div class="panel3">
				<h4> Loan Information </h4>
				<table>
					<tr>
						<td>Loan Type:</td>
						<td><input type="text" name="Loan Type"></td>
					</tr>
					<tr>
						<td>Principal($):</td>
						<td><input type="number" name=" Principal"></td>
					</tr>
					<tr>
						<td> Period(Months):</td>
						<td><input type="number" name="Period(Months)"></td>
					</tr>
					<tr>
						<td>interest(%):</td>
						<td><input type="text" name="interest(%)"></td>
					</tr>
				</table>
			</div>
			<div class="panel3">
				<label><td>Loan Type:</td></label>
				<select style="width: 350px">
						<option>Select</option>
						<option>Personal Loan</option>
						<option>Home Loan</option>
						<option>Vehicle Loan</option>
						<option>Business Loan</option>
						<option>Education Loan</option>
				</select>
			</div>
			<button onclick="Submit()"> Submit </button>
			<button onclick="Reset()"> Reset </button>
		</body>
		</html>

vuong huu phu

2020-10-22 10:52:39

<!DOCTYPE html>
<html>
<head>
	<title>LoanApplication</title>
	<meta charset="utf-8">
	<style type="text/css">
		.tieu_de {
			background-color: #ffcccc;
			font-weight:bold;
			font-size: 25px;
			border: solid red 1px;
		}
		body {
			padding-right: 60%;
			padding-left: 5%;
		}
		.c{
			background-color: #ffcccc;
			padding:2% 2% ;
			display: block;

		}
		label{
			text-align: left;
		}
		.kc{
			padding-bottom: 5px;
		}
	</style>
</head>
<body>

<div class="tieu_de">Loan Application Form</div>

<br>

<div>
<form>
	<fieldset>
		<legend>Application's Personal Infomation</legend> 
		<div class="c">
		<div class="kc">
			<label style="padding-right:120px;">Full Name:</label>
			<input type="Text" name="fullname" style="width: 50%;">
		</div>
		<div class="kc">
			<label style="padding-right: 24px">Date of Birth (MM/dd/yy)</label>
			<input type="Date" name="date" style="width: 100px;">
		</div>
		<div class="kc">
			<label style="padding-right: 96px">Phone Nmuber</label>
			<input type="ranger" name="Phone" maxlength="10">
		</div>
		<div class="kc">
			<label style="padding-right: 140px">Address</label>
			<input type="Text" name="Address" style="width: 50%;">
		</div>
		<div class="kc"> 
			<label style="padding-right: 136px">Zip code</label>
			<input type="" name="" placeholder="XXX-XXXX-XXX" style="width: 100px;" >
		</div>
		</div>
	</fieldset>

	<br>

	<fieldset>
		<legend>Application's Employment Infomation</legend>
		<div class="c">
		<div class="kc">
			<label style="padding-right: 72px">Current Employer:</label>
			<input type="Text" name="Current" style="width: 50%;">
			</div>
		<div class="kc">
			<label style="padding-right: 70px">Employer Address:</label>
			<input type="Text" name="Employer" style="width: 50%;">
		</div>
		<div class="kc">
			<label style="padding-right: 96px">Date of joining</label>
			<input type="Date" name="Date2" style="width: 100px;">
		</div>
		<div class="kc">
			<label style="padding-right: 96px">Phone Number</label>
			<input type="ranger" name="Phone2" >
		</div>
		<div class="kc">
			<label style="padding-right: 124px">E-mail ID:</label>
			<input type="E-mail" name="E-mail"style="width: 220px;">
		</div>
		<div class="kc">
			<label style="padding-right: 163px">Fax:</label>
			<input type="ranger" name="Fax" placeholder="xxx-xxxxxxx" maxlength="10">
		</div>
			<div class="kc">
			<label style="padding-right: 110px">Designation:</label>
			<input type="Text" name="Designation" style="width: 220px;">
		</div>
		<div class="kc">
			<label style="padding-right: 65px">Annual Income ($):</label>
			<input type="Number" name="Annual" style="width: 100px;">
		</div>
		</div>
	</fieldset>

		<br>

	<fieldset>
		<legend>Loan Infomation</legend>
		<div class="c">
		<div class="kc">
			<label style="padding-right: 120px">Loan Type:</label>
			<select style="width: 108px;">
				<option>Select</option>
				<option>Personal Loan</option>
				<option>Home Loan</option>
				<option>Vehicle Loan</option>
				<option>Business Loan</option>
				<option>Education Loan</option>
			</select>
		</div>
		<div class="kc">
			<label style="padding-right: 108px">Principal ($):</label>
				<input type="Number" name="Principal" style="width: 100px;">
		</div>
		<div class="kc">
			<label style="padding-right: 87px">Period (Months)</label>
			<input type="month" name="Period" style="width: 104px;">
		</div>
		<div class="kc">
			<label style="padding-right: 112px">Interest (%):</label>
			<input type="Number" name="Interest" style="width: 102px;">
		</div>
		<br>
		<div class="kc" style="padding-left: 30%">
			<button type="button">Submit</button>
			<button type="reset">Reset</button>
		</div>
		</div>
		</fieldset>
	</form>

</div>

</body>
</html>

Trần Văn Lâm

2020-10-22 07:34:53

#LoanApplication.html

<!DOCTYPE html>
<html>
<head>
	<title>Form vay tiền</title>
	<meta charset="utf-8">
	<style type="text/css">
		.panel {
			width: 100%
			margin :0 auto; 
		}
		.panel-heading { 
			font-weight: bold;
			padding: 10px;
			border: solid red 2px;
			font-size: 20px;
		}
		.panel-body{
			padding: 10px;
		}
        .kip1{
        	background-color: pink;
        	margin: 30px;
        	border: solid red 2px;
        	padding: 10px
        }
        .kip2 {
        	background-color: pink; 
        	margin: 30px;
        	border: solid red 2px;
        	padding: 10px;
        }
        .kip3 {
        	background-color: pink;
        	margin: 30px;
        	border: solid red 2px;
        	padding: 10px;
        }
        .form-group {
        	margin-bottom: 10px: 
        }
        .panel input#full_name{
        	margin-left: 153px
        }
        .panel input#date_of_birth{
        	margin-left: 40px
        }
        .panel input#phone_number{
        	margin-left: 128px
        }
        .panel input#address{
        	margin-left: 168px
        }
        .panel input#zip_code{
            margin-left: 159px
        }
        .panel input#current_employer{
            margin-left: 104px
        }
        .panel input#employer_address{
            margin-left: 101px
        }
        .panel input#date_of_joining{
        	margin-left: 41px
        }
        .panel input#email_id{
        	margin-left: 155px
        }
        .panel input#fax{
        	margin-left: 196px
        }
        .panel input#designation{
        	margin-left: 142px
        }
        .panel input#annual_income{
        	margin-left: 120px
        }
        .panel input#principal{
        	margin-left: 143px
        }
        .panel input#period{
        	margin-left: 124px
        }
        .panel input#interest{
        	margin-left: 148px
        }
        button.moi{
            margin-left: 170px
        }
        .levi{
        	font-weight: bold;
        	color: blue
        }
        .sofm{
        	font-weight: bold;
        	color: blue
        }
        .tian{
        	font-weight: bold;
        	color: blue
        }
	</style>
</head>
<body>
    <div class="panel">
    	<div class="panel-heading" style="background-color: pink">
    		Loan Application Form 
    	</div>
    	<div class="panel-body">
    		<form method="post">

    		<div class="kip1">
    			<div class="sofm"><span>Applicant's Personal Information</span></div>
    			<div>
    			<label>Full Name:</label>
    			<input type="text" name="full_name" id="full_name">
    		</div>
    		<div>
    			<label>Date of Birth(MM/dd/yyyy):</label>
    			<input type="date" name="date_of_birth" id="date_of_birth">
    		</div>
    		<div>
    			<label>Phone number:</label>
    			<input type="number" name="phone_number" id="phone_number">
    		</div>
    		<div>
    			<label>Address:</label>
    			<input type="text" name="address" id="address">
    		</div>
    		<div>
    			<label>ZIP Code:</label>
    			<input type="number" name="zip_code" id="zip_code">
    		</div>
    		</div>
    		<div class="kip2">
    			<div class="tian"><span>Applicant's Employment Information</span></div>
    			<div>
    				<label>Current Employer:</label>
    			<input type="text" name="current_employer" id="current_employer">
    			</div>
    			<div>
    				<label>Employer Address:</label>
    				<input type="text" name="employer address" id="employer_address">
    			</div>
    			<div>
    				<label>Date of Joining:(MM/dd/yy)</label>
    				<input type="date" name="date_of_joining" id="date_of_joining">
    			</div>
    			<div>
    				<label>Phone number:</label>
    				<input type="number" name="phone_number" id="phone_number">
    			</div>
    			<div>
    				<label>E-mail ID:</label>
    				<input type="email" name="email_id" id="email_id">
    			</div>
    			<div>
    				<label>Fax:</label>
    				<input type="text" name="fax" id="fax">
    			</div>
    			<div>
    				<label>Designation:</label>
    				<input type="text" name="designation" id="designation">
    			</div>
    			<div>
    				<label>Annual Income:</label>
    				<input type="number" name="annual_income" id="annual_income">
    			</div>
    		</div>
            
    		<div class="kip3">
    			<div class="levi"><span>Loan Information</span></div>
    			<div>
    				<label>Loan Type:</label>
    				<select style="margin-left: 152px">
    					<option>Select</option>
    					<option>Personal Loan</option>
    					<option>Home Loan</option>
    					<option>Vehicle Loan</option>
    					<option>Business Loan</option>
    					<option>Education Loan</option>
    				</select>
    			</div>
    			<div>
    				<label>Principal($):</label>
    				<input type="number" name="principal" id="principal">
    			</div>
    			<div>
    				<label>Period(Month):</label>
    				<input type="number" name="period" id="period">
    			</div>
    			<div>
    				<label>Interest(%):</label>
    				<input type="number" name="interest" id="interest">
    			</div>
    			<br>
    			<div>
    				<button class="moi">Submid</button>
    				<button>Reset</button>
    			</div>
    		</div>

    		</form>
    	</div>
    
    </div>
</body>
</html>

Nguyễn Hữu Hiếu

2020-10-21 10:00:49

#2024.html

<!DOCTYPE html>
<html>
<head>
	<title>Short URL: https://gokisoft.com/2024</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="main">Loan Application Form</div>
	<div style="margin-bottom: 20px;">
		<fieldset class="bodymain">
  			<legend style="color: blue;">Application's Personal Information</legend>
			<div class="body">
				<div class="chitiet">
					<label class="row1">Full name:</label>
					<input class="row2" type="text" name="fullname">
				</div>
				<div class="chitiet">
					<label class="row1">Date of birth (MM/dd/yyyy):</label>
					<input class="row2" type="Date" name="date">
				</div>
				<div class="chitiet">
					<label class="row1">Phone Number:</label>
					<input class="row2" type="number" name="phone">
				</div>
				<div class="chitiet">
					<label class="row1">Address:</label>
					<input class="row2" type="text" name="address">
				</div>
				<div class="chitiet">
					<label class="row1">ZIP code:</label>
					<input class="row2" type="number" name="code">
			</div>
		</fieldset>	
	</div style="margin-bottom: 20px;">
		<fieldset class="bodymain">
		  	<legend style="color: blue;">Application's Employment Information</legend>
				<div class="body">
					<div class="chitiet">
						<label class="row1">Current Employer:</label>
						<input class="row2" type="text" name="employer">
					</div>
					<div class="chitiet">
						<label class="row1">Employer Address:</label>
						<input class="row2" type="text" name="addressemployer">
					</div>
					<div class="chitiet">
						<label class="row1">date of Joinning (MM/dd/yyyy):</label>
						<input class="row2" type="Date" name="doj">
					</div>
					<div class="chitiet">
						<label class="row1">Phone Number:</label>
						<input class="row2" type="tel" name="phonenumber2">
					</div>
					<div class="chitiet">
						<label class="row1">E-mail HD:</label>
						<input class="row2" type="E-mail" name="mailhd">
					</div>
					<div class="chitiet">
						<label class="row1">Fax:</label>
						<input class="row2" type="text" name="fax">
					</div>
					<div class="chitiet">
						<label class="row1">Designation:</label>
						<input class="row2" type="text" name="des">
					</div>
					<div class="chitiet">
						<label class="row1">Annual Income ($):</label>
						<input class="row2" type="text" name="income">
				</div>
		</fieldset>
	<div>
		<fieldset class="bodymain">
  		<legend style="color: blue;">Loan Information</legend>
		<div class="body">
			<div class="chitiet">
				<label class="row1">Loan Type:</label>
				<select class="row2">
					<option>-- Select --</option>
					<option>a. Personal Loan</option>
					<option>b. Home Loan</option>
					<option>c. Vehice Loan</option>
					<option>d. Personal Loan</option>
					<option>e. Education Loan</option>
				</select>
			</div>
			<div class="chitiet">
				<label class="row1">Principal ($):</label>
				<input class="row2" type="text" name="principal">
			</div>
			<div class="chitiet">
				<label class="row1">Period (Month):</label>
				<input class="row2" type="text" name="period">
			</div>
			<div class="chitiet">
				<label class="row1">Interest Address:</label>
				<input class="row2" type="text" name="interrest">
			</div>
			<div class="chitiet">
				<div class="row1"></div>
				<div class="row2">
					<button>Submit</button>
					<button>Reset</button>
				</div>
				
			</div>
	</fieldset>
	</div style="margin-bottom: 20px;">
		
	
		
		
	
	
</body>
</html>

#style.css

.main {
	background-color: pink;
	font-weight: bold;
	border: solid red 1px;
	padding-left: 10px;
	margin-bottom: 20px;

}
.body1 {
	margin: 10px;
	background-color: pink;
	border: solid red 1px;
}
.bodymain {
	background-color: white;
	border: solid red 1px;
}
fieldset {
    border: 1px solid red
    margin-bottom: 20px;
   	
  }
.body {
	background-color: pink;
	margin: 10px;
	
}
.chitiet {
	display: flex;
	margin-bottom: 10px;
}
.row1 {
	float: left;
	width: 30%;
	padding-left: 80px;
	padding-top: 5px;
}
.row2 {
	float: left;
	width: 50%;
	padding-right: 40px;
	padding-top: 5px;
}
input {
	height: 10px;
	float: left;
	width: 70%;
	padding-left: 20px;
	
}