前端学习-两个小案例

小白的程序空间

已于 2024-11-19 09:59:02 修改

阅读量60

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端技术汇总文章标签：前端学习

于 2018-05-27 10:36:36 首次发布

本文链接：https://blog.youkuaiyun.com/crazy_cz/article/details/80452459

Web前端技术汇总专栏收录该内容

8 篇文章

订阅专栏

1.登录页面

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="400" height="400" bgcolor="pink" cellspacing="0">
		<thead>
			<tr>
				<th colspan="2"align="center">京东会员</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>用户名：</td>
				<td><input type="text" maxlength="6" name="username" value="请输入用户名"><font color="red" size="2">最多输入6个字符</font></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="text" maxlength="6" name="username"><font color="red" size="2">最多输入6个字符</font></td>
			</tr>
			<tr>
				<td>验证码：</td>
				<td><input type="text" ><br><br><img src="作业/yzm.jpg" width="100" ></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2" align="center"><a href="zc.html"><font color="blue"><ins>登录 | 注册用户</ins></font></a></td>
			</tr>

		</tfoot>
	</table>
</body>
<html>

2.注册页面

效果图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="1.php" method="post">
	<fieldset>
		<legend>账户信息</legend>
		<font color="red" size="2">*</font>用户名:<input type="text" name="username" value="请输入您的用户名">
		<br><br>
		<font color="red" size="2">*</font>密  码:<input type="text">
		<br><br>
		性别:<input type="radio" name="gender" checked="checked">男
		<input type="radio" name="gender">女
	</fieldset>
	<br>
	<fieldset>
		<legend>公司信息</legend>
		公司名称：<input type="text" name="name">
		<br><br>
		公司所在地址：<select>
		              <option selected="selected">---请选择---</option>
		              <option>北京</option>
		              <option>上海</option>
		              <option>广东</option>
		              <option>重庆</option>
		              <option>陕西</option>
		              <option>四川</option>
	                  </select>
	                  <select>
	                  	<option selected="selected">---请选择---</option>
	                    <optgroup label="北京市"></optgroup>
	                  	<option>昌平区</option>
	                  	<option>朝阳区</option>
	                  	<optgroup label="上海市"></optgroup>
	                  	<option>徐汇区</option>
	                  	<option>陆家嘴</option>
	                  	<optgroup label="陕西"></optgroup>
	                  	<option>西安</option>
	                  	<option>咸阳</option>
	                  </select>
	                  <select>
	                  	<option selected="selected">---请选择---</option>
	                  	<option></option>
	                  </select>
	                  <br><br>
	                  <!-- type="radio"单选框 type="checkbox"多选框 -->
	    购买类型用途：<input type="checkbox" checked="checked">IT
	                  <input type="checkbox" >通讯设备
	                  <input type="checkbox" >大家电
	                  <input type="checkbox" >办公耗材
	                  <br><br>
	    公司行业：<select multiple="multiple">
	              <option>IT行业</option>
	              <option>计算机软件</option>
	              <option>市场推广</option>
	              <option>广告</option>
	              </select>
	              <br><br>
	    公司介绍：<textarea cols="40" rows="20"></textarea>
	    <br><br>
	    营业执照上传：<input type="file">未选择任何文件
	    <br><br>
        <input type="image" src="作业/reg.jpg">
	</fieldset>

</body>
</html>