Item 1 attendance register
Page rendering:
requirement:
Design the registration page.
HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Attendance registration form</title>
<style type="text/css">
body{text-align: center;}
h1{
font-size: 25px;
text-align: center;
}
.zhuce{
font-size: 14px;
text-align: center;
width: 550px;
margin: 0 auto;
background: #f7f7f7;
}
.zhuce td{
border: 1px solid #b4b4b4;
padding:2px 3px;
}
.zhuce .ibg{
text-align: left;
}
.zhuce .bbg{
padding: 10px 0;
font-size: 10px;
}
#bt{
width: 40px;
height: 28px;
}
</style>
</head>
<body>
<h1>Attendance registration form</h1>
<form>
<table class="zhuce">
<tr>
<td colspan="4" class="ibg">full name:
<input name="txtName" type="text" >
</td>
<td colspan="4" class="ibg">Company:
<input name="txtzhiwu" type="text" size="22">
</td>
</tr>
<tr>
<td colspan="4" class="ibg">Gender:
<input type="radio" name="sex" value="male"/>male
<input type="radio" name="sex" value="female"/>female
</td>
<td colspan="4" class="ibg">mobile phone:
<input name="txtshouji" type="text" size="10">
</td>
</tr>
<tr>
<td colspan="4" class="ibg">hotel:
<input type="radio" name="res" value="tianshan"/>Tianshan Hotel
<input type="radio" name="res" value="kunlun"/>Kunlun Hotel
</td>
<td class="ibg">Number of hotels booked:
<input name="txtfangjianshu" type="text" size="1">set
</td>
</tr>
<tr>
<td colspan="9" class="ibg">
Room type:
<input type="radio" name="leixing" value="danren"/>Single room (320 yuan)
<input type="radio" name="leixing" value="shuangren"/>Standard double room (380 yuan)
<input type="radio" name="leixing" value="jiating"/>Family Suite (450 yuan)
</td>
</tr>
<tr>
<td colspan="9" class="bbg">
<input id="bt" type="submit" name="btnOk" value="Submit">
<input id="bt" type="reset" ><br><br>
</td>
</tr>
</table>
</form>
</body>
</html>
Project 2 design the advice page of scientific and technological workers
Page rendering:
requirement:
The "message board" page is designed with DIV and table mixed layout.
The other two lines are as follows:
Note: if your message is inconvenient to be made public, please select the "confidential" option. After submission, you can reply to your message number, query password and your name based on the system feedback.
Please abide by relevant national laws and regulations, respect online ethics, and bear all legal liabilities directly or indirectly caused by your behavior.
This website has all rights to manage pseudonyms and messages.
HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Message board design</title>
<style type="text/css">
*{
font-size:12px;
}
#div0{
width:800px;
height:440px;
border:5px solid #f3f3f2;
margin:30px auto;
padding:10px;}
#div1{
background-color:#f2f9fd;
color:#0000ff;
width:100%;
height:40px;}
#div2{
background-color:#f2f9fd;
color:#0000ff;
width:100%;
height:400px;
margin-top: 3px;}
#div2 .b1 {
text-align: center;
font-size: 12px;
font-weight: bold;
line-height: 22px;
color: #339966;
width: 100px;
}
#div1 .b1{
text-align: left;
font-size: 26px;
font-weight: bold;
font-family: Blackbody;
color:#0033cc;
width: 500px;
}
#div1 .b2{
text-align:left;
font-size:12px;
font-weight:bold;
font-family: Blackbody;
color:#0033cc;
width:200px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="b1">Message Board</td>
<td class="b2">Suggestions of scientific and technological workers</td>
</tr>
</table>
</div>
<div id="div2">
<form action="" method="">
<table border="0" cellspacing="" cellpadding="" align="center" width="645px">
<tr>
<td>
<font size="" color="red">Post a message</font>
</td>
</tr>
</table>
<table border="" cellspacing="0" cellpadding="" align="center" bordercolor="white">
<tr>
<td class="b1">surname Name:</td>
<td>
<input type="text" id="" value="" name="name" size="10" />
</td>
</tr>
<tr>
<td class="b1">E-mail:</td>
<td>
<input type="text" id="" value="" name="e-mail" size="30" />
</td>
</tr>
<tr>
<td class="b1">branch Class:</td>
<td>
<font size="" color="red">
Suggestions of scientific and technological workers
<input type="radio" name="bm" id="" value="" />Not confidential
<input type="radio" name="bbm" id="" value="" />secrecy
Message type:
</font>
<select name="lx">
<option value="1" selected="selected"></option>
<option value="2">complaint</option>
<option value="3">consulting service</option>
<option value="4">proposal</option>
<option value="5">feedback</option>
</select>
</td>
</tr>
<tr>
<td class="b1">stay Statement:</td>
<td>
<textarea rows="6" cols="50">
</textarea>
</td>
</tr>
<tr>
<td colspan="2">Note: if your message is inconvenient to be made public, please select"secrecy"Option. After submission, you can reply to your message number, query password and your name based on the system feedback.</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="" id="" value="Submit" />
<input type="reset" name="" id="" value="empty" />
</td>
</tr>
<tr>
<td colspan="2">
<ul>
<li>Please abide by relevant national laws and regulations, respect online ethics, and bear all legal liabilities directly or indirectly caused by your behavior.</li>
<li>This website has all rights to manage pseudonyms and messages.</li>
</ul>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Project 3: design the questionnaire of College Students' summer social practice
Page rendering:
requirement:
The contents of the questionnaire preamble are as follows:
Summer social practice questionnaire of College Students
Dear students: Hello everyone!
In order to better understand people's views on the hot phenomenon of filling in computer majors in recent years, this questionnaire is specially formulated. I hope to get your cooperation. Please carefully read and answer the following questions. Your answer will directly affect the credibility and effectiveness of this survey. Sincerely thank you for your support. I wish you a happy day, thank you!
Other contents in the questionnaire:
1. Your gender: male, female.
2. Your school:
3. Your grade: 6 options, which are "please choose your grade, freshman, sophomore, junior, senior and junior college".
4. Reasons for applying for this major: there are 7 check boxes. The contents of the check boxes are "interested in yourself, beneficial to future development, adapting to society, parents' opinions, teachers' suggestions, school adjustment, and others".
5. Your suggestions for this major: five check boxes. The contents of the check boxes are "pay attention to quality rather than weight when recruiting, improve the faculty, better adapt to social needs, strengthen the construction of professional laboratories, and others".
6. You think it is necessary for students of this major to participate in social practice: there are three radio buttons, and the contents of the radio buttons are "necessary, unnecessary and indifferent".
7. Whether your parents agree with you to read this major: there are three radio buttons, and the contents of the radio buttons are "very agree, I hope so, general, not very happy and don't understand".
8. Your suggestions for the school: a multi choice text field with 5 lines and 100 columns. The initial content of the multi choice text field is "please make valuable suggestions".
The content of the copyright area is "Copyright: Department of computer science and technology, software engineering teaching and research office copy right" © 2021-2025”.
HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Summer social practice questionnaire of College Students</title>
<style type="text/css">
body {
background-color: #bbdcff;
margin: 20px;
}
.bt1 {
font-size: 35px;
font-family: Blackbody;
color: #0033ff;
line-height: 100px;
text-align: center;
}
.td1 {
font-size: 18px;
font-weight: bold;
color: #3300cc;
}
#p1 {
text-indent: 2em;
font-size: 16px;
font-weight: bold;
color: #3366ff;
}
</style>
</head>
<body background="#1054b9">
<form action="" method="">
<table border="14px" cellspacing="0" cellpadding="0" background="bgimags.jpg" width="850px" align="center"
bordercolor="white">
<tr>
<td class="bt1">
Summer social practice questionnaire of College Students
</td>
</tr>
<tr>
<td>
<p id="p1">Dear classmates: Hello everyone!</p>
<p id="p1">In order to better understand people's views on the hot phenomenon of filling in computer majors in recent years, this questionnaire is specially formulated. I hope to get your cooperation. Please carefully read and answer the following questions. Your answer will directly affect the credibility and effectiveness of this survey. Sincerely thank you for your support, have a good day, thank you!</p>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1">1.Your gender:</td>
<td>
<input type="radio" name="sex" id="" value="" />male
<input type="radio" name="sex" id="" value="" />female
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1">2.Your school:</td>
<td>
<input type="text" id="" value="" size="40" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1">3.Your grade:</td>
<td>
<select name="grade">
<option value="1">Please select your grade:</option>
<option value="2">Freshman</option>
<option value="3">Sophomore</option>
<option value="4">Junior</option>
<option value="5">Senior</option>
<option value="6">junior college</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1">4.Reasons for applying for this major:</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="" value="" />Interested in yourself<br>
<input type="checkbox" name="" id="" value="" />Beneficial to future development<br>
<input type="checkbox" name="" id="" value="" />Adapt to society<br>
<input type="checkbox" name="" id="" value="" />Parental claims<br>
<input type="checkbox" name="" id="" value="" />Teacher's advice<br>
<input type="checkbox" name="" id="" value="" />School adjustment<br>
<input type="checkbox" name="" id="" value="" />other
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1">5.Your suggestions for this major: </td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="" value="" />Quality is more important than weight when recruiting<br>
<input type="checkbox" name="" id="" value="" />Teachers should be improved<br>
<input type="checkbox" name="" id="" value="" />To better meet the needs of society<br>
<input type="checkbox" name="" id="" value="" />Strengthen the construction of professional laboratories<br>
<input type="checkbox" name="" id="" value="" />other
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1"> 6.You think it is necessary for students of this major to participate in social practice: </td>
</tr>
<tr>
<td>
<input type="radio" name="1" id="" value="" />be necessary
<input type="radio" name="1" id="" value="" />Not necessary
<input type="radio" name="1" id="" value="" />indifferent
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1">7.Do your parents approve of your studying this major </td>
</tr>
<tr>
<td>
<input type="radio" name="2" id="" value="" />Yes, I hope so
<input type="radio" name="2" id="" value="" />Generally, not very happy
<input type="radio" name="2" id="" value="" />Do not understand
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td class="td1"> 8.Your suggestions for the school:</td>
</tr>
<tr>
<td><textarea rows="5" cols="100">Please put forward your valuable suggestions:</textarea></td>
</tr>
</table>
</td>
</tr>
<tr height="50px">
<td align="center">
<input type="submit" id="" name="" value="Submit answers" />
<input type="reset" name="" id="" value="empty" />
</td>
</tr>
<tr>
<td height="40px" align="center" valign="middle">
<font size="" color="blue">The content of the copyright area is "Copyright: software engineering teaching and Research Office of the Department of computer science and technology copy right©2015-2020</font>
</td>
</tr>
</table>
</form>
</body>
</html>