html前端学习笔记

1.文本框密码框设计

<!--登录框的设计-->
	<form name="form1" action="test.jsp" method="post">     <!--form1为一个表单的名称，不能重复，test.jsp为提交地址,method为提交的方式-->
		<table  width="300px" bgcolor="#7fffd4" cellpadding="10px">  <!--关联表单属性-->
		<tr>
			<td>账号：</td>
		</tr>
		<tr>
			<td><input name ="user_name" type="text" /></td>
		</tr>
		<tr>
			<td>密码:</td>
		</tr>
		<tr>
			<td><input name = "password" type="password" /></td>
		</tr>
		</table>
	<!--默认语句-->
	账号：<input name ="user_name" type="text" />            <!--text指定输入框的名字,单行文本输入框的type值固定为text-->
	密码：<input name = "password" type="password" />        <!-- password  type值是固定的一个值,密码框属性，其他设置和单行文本没有区别。-->  

2.单选框、复选框

单选框一次只能一个标签，用标签描述，单选框使用时至少需要2个以上的标签，并且他们的name属性相同，其中每个input构成一个选项。例如：

<!--单选框-->
<table  width="400px" bgcolor="#7fffd4" cellpadding="10px">  <!--关联表单属性-->
<tr>
	<td>
		选择：篮球<input name = "d1" type="radio" value="l1" >
		选择：足球<input name = "d1" type="radio" value="z1" >
		选择：网球<input name = "d1" type="radio" value="w1" >
	</td>   <!--radio属于单选类型,所以用户提交出去的是value里面的值，而不是在页面写的文字-->
</tr>
</table>

复选框

跟单选框属性一样，区别就是type属性是checkbox。

<!--复选框-->
		<table  width="400px" bgcolor="#7fffd4" cellpadding="10px">  <!--关联表单属性-->
		<tr> <!--复选框开始-->
			<td>
				选择城市：北京<input name="c1" type="checkbox" value="010">上海<input name="c2" type="checkbox" value="021" checked> 
				<!--后面补充增加checked值，默认当前选项为选中状态-->
			</td>  
		</tr>
		</table>

下拉单选框

下拉菜单一次选择一个选项，有select和option两个标签组成，option里放选择的内容。

下拉单选框

<!--下拉菜单-->
<table  width="400px" bgcolor="#7fffd4" cellpadding="10px">  <!--关联表单属性-->
<tr>
	<td>选择出生日期：
<select name="select" id="select"> 
	<option value="1997">1997</option>
	<option value="1998" selected="selected">1998</option>
	<option value="1999">1999</option>
	<option value="2000">2000</option>
</section>
	</td>
</tr>
</table>

文件上传

	<td>  <!--写入表格样式-->
	留言<textarea name="book" cols="100" role="10"></textarea>
	<br>
	<input type="file">   <!--前端的查找文件的上传按钮-->
	</td>

多行文本输入框

多行文本应用于邮件，正文或者贴吧的正文都是多行文本的输入框。不是input这种单标签了，它已经变成textarea这种文件域的双标记属性。

提交按钮

按钮的类型是submit，值是按钮显示的文字。name属性自定义

表单域属性

<!--创建提交按钮-->
<tr>
	<td>
	<input name="submit" type="submit" value="登录" /">
	</td>
</tr>

重置按钮

重置按钮中的概念是type类型是reset重置类型，其他的属性和提交按钮一致

	<td>
	<input name="reset" type="reset"  value="重填" />    <!--重置按钮-->
	</td>