간단한 survey form 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2019315447 / 이재원</title>
<style>
img {
display: block;
margin: auto;
}
div.x {
width: 100%;
height: 30px;
}
div.left{
width: 30%;
float: left;
}
div.right {
width: 70%;
float: right;
}
.border{
width: 100%;
border-top-style: none;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: grey;
border-left-style: none;
border-right-style: none;
}
</style>
</head>
<body>
<img src="K-25.jpeg" width="300" height="200">
<h2><span style="color:red">Survey Form</span></h2>
<div class="x">
<div class="left">
<label>Grade</label>
</div>
<div class="right">
<form name="info">
<label><input type="radio" name="Grade" value="Freshman">Freshman</label>
<label><input type="radio" name="Grade" value="Sophomore">Sophomore</label>
<label><input type="radio" name="Grade" value="Junior">Junior</label>
<label><input type="radio" name="Grade" value="Senior">Senior</label>
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>First Name</label>
</div>
<div class="right">
<form name="info">
<input type="text" Placeholder="First Name" name="First Name" size="54">
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>Last Name</label>
</div>
<div class="right">
<form name="info">
<input type="text" Placeholder="Last Name" name="Last Name" size="54">
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>Student ID</label>
</div>
<div class="right">
<form name="info">
<input type="text" name="Student ID" size="54">
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>Mail Address</label>
</div>
<div class="right">
<form name="info">
<input type="text" name="Mail Address" size="54">
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>Department</label>
</div>
<div class="right">
<form name="info">
<select size="1">
<option value="Software">Software</option>
<option value="Electronic and Electrical Engineering">Electronic and Electrical Engineering</option>
<option value="Department of Computer Science and Engineering">Department of Computer Science and Engineering</option>
<option value="Film, Television and Multimedia">Film, Television and Multimedia</option>
<option value="Bio-Mechatronic Engineering">Bio-Mechatronic Engineering</option>
<option value="Civil, Architectural Engineering and Landscape Architecture">Civil, Architectural Engineering and Landscape Architecture</option>
<option value="Education in Classical Chinese">Education in Classical Chinese</option>
<option value="Global Business Administration">Global Business Administration</option>
<option value="Global Biomedical Engineering">Global Biomedical Engineering</option>
<option value="Business Administration">Business Administration</option>
</select>
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>Upload Profile Photo</label>
</div>
<div class="right">
<form name="info">
<input type="file" name="Profile Photo" size="54">
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>E-Mail</label>
</div>
<div class="right">
<form name="info">
<input type="text" name="E-Mail" size="54">
</form>
</div>
</div>
<div class="x">
<div class="left">
<label>Mobile</label>
</div>
<div class="right">
<form name="info">
<input type="text" name="Mobile" size="54" placeholder="+82-10-0000-0000">
</form>
</div>
</div>
<div style="height: 90px;">
<div class="left">
<label>Programming Experience</label>
</div>
<div class="right">
<form name="info">
<label><input type="checkbox" name="Java">Java</label><br>
<label><input type="checkbox" name="C++">C++</label><br>
<label><input type="checkbox" name="Python">Python</label><br>
<label><input type="checkbox" name="Verilog">Verilog</label>
</form>
</div>
</div>
<div style="height: 90px;">
<div class="left">
<label>Additional Information</label>
</div>
<div class="right">
<form name="info">
<textarea placeholder="Optional" rows="4" cols="44" ></textarea><br>
<input type="submit" value="submit"><input type="reset" value="reset"><br>
</form>
</div>
</div>
<br><br>
<b>HTML List: Ordered, Unordered & Definition List</b>
<hr>
<div>
<p>Following is the list of proposed student activities like:</p>
<ol type="1">
<li>Develop programs related with unit vice topics in computer laboratory.</li>
<li>Develop any module of to be useful in real life application.</li>
<li>Multimedia presentation of module developed by students.</li>
</ol>
</div>
<hr>
<div>
<p>List of Software/Learning Websites</p>
<ul>
<li>
ASP Tutorial - W3Schools<br>
<a href="http://www.w3schools.com/asp/">http://www.w3schools.com/asp/</a>
</li>
<li>
Classic ASP Tutorials & Articles - Web Wiz<br>
<a href="http://www.webwiz.co.uk">http://www.webwiz.co.uk</a>
</li>
<li>
HTML Tutorial - W3Schools<br>
<a href="http://www.w3schools.com/html/">http://www.w3schools.com/html/</a>
</li>
<li>
CSS Tutorial<br>
<a href="http://www.csstutorial.net/">http://www.csstutorial.net/</a>
</li>
<li>
VBScript Tutorial - Tutorials Point<br>
<a href="http://www.tutorialspoint.com/vbscript/index.htm">http://www.tutorialspoint.com/vbscript/index.htm</a>
</li>
<li>
ADO Tutorial - W3Schools<br>
<a href="http://www.w3schools.com/ADO/default.asp">http://www.w3schools.com/ADO/default.asp</a>
</li>
</ul>
</div>
<hr>
<br>
<table border="1" width="50%" height="300">
<caption style="font-size:25px; color: red;">Text and Table Formatting Practice</caption>
<thead>
<tr align="center">
<th><b>HTML Tag</b></th>
<th><b>Output</b></th>
</tr>
</thead>
<tbody>
<tr align="left">
<td>normal text</td>
<td>hello world</td>
</tr>
<tr align="left">
<td>Font & its attributes</td>
<td><span style="font-size:25px; color: blue;">hello world</span></td>
</tr>
<tr align="left">
<td><B></td>
<td><b>Bold</b></td>
</tr>
<tr align="left">
<td><I></td>
<td><i>Italic</i></td>
</tr>
<tr align="left">
<td><U></td>
<td><u>Underline</u></td>
</tr>
<tr align="left">
<td><EM></td>
<td><em>Emphasis</em></td>
</tr>
<tr align="left">
<td><STRONG></td>
<td><strong>STRONG</strong></td>
</tr>
<tr align="left">
<td><TELETYPE></td>
<td><kbd>TELETYPE</kbd></td>
</tr>
<tr align="left">
<td><CITE></td>
<td><cite>Citation</cite></td>
</tr>
<tr align="left">
<td><STRIKE></td>
<td><s>strike through text</s></td>
</tr>
</tbody>
</table>
</body>
</html>
💼 Software Engineer @ LG Electronics | 🎓 SungKyunKwan Univ. CSE