HTML表单笔记

#HTML表单的笔记

1.表单基本的标签

 

属性：
文本框和密码： maxlength:最多输入的字符个数
           size:尺寸，设置长度
单选按钮复选按钮默认选中：checked="checked"
下拉菜单默认选中：selected="selected"
placeholder:在文本框中显示文字，当光标置于文本框时消失

表单标签 action:动作，数据将要提交到的路径
        method:方法，表单提交的方式get、post
        表单元素：input标签
        type属性： text:普通文本框
                          password:密码框
                         radio:单选按钮，实现单选效果，必须保证多个单选框的name属性一致
                         checkbox:复选框，一般name属性也是相同
        表单元素：select标签(下拉菜单)
   注:单选按钮和复选框，下拉菜单通常需要设置value属性值
 

<form action="#" method="">
		邮箱名:<input type="text" name="email" disabled="disabled"/><br/>
		密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd"><br/>
		性&nbsp;&nbsp;&nbsp;别:
		<!--checked:默认选中-->
		<input type="radio" name="sex" value="boy" checked/>男
		<input type="radio" name="sex" value="girl"/>女<br/>
		爱&nbsp;&nbsp;&nbsp;好:
		<input type="checkbox" name="hobby" value="swim">游泳
		<input type="checkbox" name="hobby" value="basketball">打篮球
		<input type="checkbox" name="hobby" checked value="tennis">打网球
		<input type="checkbox" name="hobby" value="moving">看电影<br/>
		生&nbsp;&nbsp;&nbsp;日:
		<!--下拉菜单通过selected进行默认选中-->
		<select name="birthday">
			<option value="2003">2003</option>
			<option value="2002">2002</option>
			<option value="2001" selected>2001</option>
			<option value="2000">2000</option>
			<option value="1999">1999</option>
		</select>年
		<select name="month">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3" selected>3</option>
			<option value="4">4</option>
		</select>月<br/>
		<!--文件上传的标签-->
		<input type="file" name="img"/><br/>
		<!--文本区域   cols:列数,每一行可以填写的字符个数 rows:行数-->
		<textarea cols="30" rows="5" readonly>请评价！</textarea><br/>
		<!--提交按钮:将数据提交到后台-->
		<input type="submit" value="注册"/>
	</form>

表单在做很多门户网站的时候都会用到，还有表单的验证，慢慢学

2.语义化表单

fieldset:用于设置表单的外边框
重置：<input type="reset" value="重置"/>
图片提交按钮<input type="image" src="图片的路径"/>
隐藏表单域：<input type="hidden" value=""/>
文件菜单 ：<input type="file" name=""/>

  <form action="#">
	<!--fieldset是表单语义化操作，可以更好的组织表单元素-->
	<fieldset>
	<legend>用户登录</legend>
	<!--通过label标签实现光标快速定位，for属性值要和被定位标签id值相同-->
	<label for="un">用户名:</label><input type="text" size="20" maxlength="20" name="uname" id="un"/><br/>
	<label>密码:</label><input type="password" name="pwd"/><br/>

	<input type="submit" value="登录"/>
	</fieldset>
  </form>