第二次网页前端培训笔记（HTML标签）

表单

form标签

<!--
	form标签
	    表单标签，块级元素，会自动换行，将数据传输给服务器。
		常用属性：
		    action表单提交地址url
		    id唯一标识 
		    name名称
		    target表单提交打开方式（当前窗口） 		
		    method提交方式 （get请求/post请求）
-->
<form action="#" method="get" id="myform" name="myform">
<input>
</form>

input标签

		<!--
		表单元素需要设置name属性值，否则数据无法传递
		    input元素
			    type     表单元素的类型
				    text文本框
					password密码框
					radio单选框
					checkbox复选框
					button普通按钮
					hidden隐藏域
					file文件域（上传文件）
					date日期框
					submit提交按钮
					reset重置按钮
					image图片按钮（提交按钮）
				value     表单元素的值
			    checked   是否选中（单选框/复选框）
				disabled  是否禁用
				maxlength 允许输入的最大字符
		-->
		<form action="#" method="get" id="myform" name="myform">
		编号：<input type="hidden"/ name="userid" value="1"/><br>
		姓名：<input type="text" value=""/><br>
		性别：
		男<input type="radio" name="usersex" value="man"/>
		女<input type="radio" name="usersex" value="woman"/>
		<input type="button" value="普通按钮"/><!--普通按钮-->
		<input type="reset" value="重置按钮"/><!--重置表单-->
		<input type="submit" value="提交按钮"/><!--提交表单-->
		<input type="image" src="./img/郑州轻工业.png"/>
		</form>

 textarea标签(双标签，需要设置name属性)

<form>
简介：<textarea name="remark" rows="6">只可以显示出六行但是不限字数</textarea>
</form>

 label（双标签聚焦）

设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单聚焦

<form>
<label for="username">姓名</label>：<input type="text" value="tsy" id="username" name="username"/>
</form>

 button按钮（双标签）

button普通按钮

submit提交按钮

reset重置按钮

image图片按钮（提交按钮）

<button>按钮</button>
<!--该按钮默认为提交按钮-->

select下拉框（定义下拉列表）

设置了value值，提交的是value内的值（防止填为空时提交的是“请选择城市”）

单选

<form>		
      城市：
		    <select name="city">
				<option value="">请选择城市</option>
				<option value="beijing">北京</option>
				<option value="zhengzhou">郑州</option>
				<option value="jinan">济南</option>
				<option value="shanghai">上海</option>
			</select>
</form>

 多选

<form>		
      城市：
		    <select name="city" multiple="multiple">
				<option value="">请选择城市</option>
				<option value="beijing">北京</option>
				<option value="zhengzhou">郑州</option>
				<option value="jinan">济南</option>
				<option value="shanghai">上海</option>
			</select>
</form>

 禁用全部选项

<form>		
      城市：
		    <select name="city" multiple="multiple" disabled="disabled">
				<option value="">请选择城市</option>
				<option value="beijing">北京</option>
				<option value="zhengzhou">郑州</option>
				<option value="jinan">济南</option>
				<option value="shanghai">上海</option>
			</select>
</form>

 禁用某一选项（按钮也可以禁用）

<form>		
      城市：
		    <select name="city" multiple="multiple" >
				<option value="">请选择城市</option>
				<option value="beijing">北京</option>
				<option value="zhengzhou" disabled="disabled">郑州</option>
				<option value="jinan">济南</option>
				<option value="shanghai">上海</option>
			</select>
</form>

 选择某一选项（默认某一选项）

<form>		
      城市：
		    <select name="city" multiple="multiple" >
				<option value="">请选择城市</option>
				<option value="beijing">北京</option>
				<option value="zhengzhou" selected="selected">郑州</option>
				<option value="jinan">济南</option>
				<option value="shanghai">上海</option>
			</select>
</form>

 

 常用字符实体

<!--
		    常用字符实体：
			    空格      &nbsp
				小于号    &lt
				大于号    &gt
				版权      &copy 
-->