第二次前端培训（HTML)

 表单

1. form标签 表单标签 块状元素，能自动换行 将数据传递给服务器

常用属性：

           action：表单提交的地址url（必须）

           id ：唯一标识

           name：名称（所有的标签都有id和name）

           target：表单提交打开方式——是在当前窗口还是另外开一个窗口(默认当前窗口，故一般                             不用写这个属性)

           method：提交方式，有两种get和post.（默认是get)

get和post提交方式的区别：

get请求：参数会直接跟在url后面，用问号拼接。安全性差，但是传递的数据量小，有缓存，效率高（是post速度的两倍）适合查找信息的时候用

post请求：参数不会直接跟在url地址栏后面，会放在请求体中。安全性高，传输数据量大，无缓存，速度相对慢 适合添加，修改信息的时候用

2. input 标签（表单元素）  用于搜集用户信息（注意：表单元素一般都需要设置name属性值，否则数据无法传递！！！）

常用属性：

             type：表单元素的类型

                              text：文本框

                              password：密码框

                              radio：单选框（需要设置一组相同的name属性值）

                              checkbox：复选框（需要设置一组相同的name属性值）

                              button：普通按钮

                              hidden：隐藏域（用来存放需要传递给服务器，但不需要显示的数据）

                              file：文件域（上传文件）

                              date：时间

                              submit：提交按钮

                              reset：重置按钮

                              image：图片按钮（提交按钮）

                    value：表单元素的值

                    checked：是否选中（单选框/复选框）

                    disabled：是否禁用

                    maxlength：允许输入的最大字符

                    .......

基本功能参考代码：

<form action="#" id="myform" name="myform">
			编号:<input type="hidden" name="userId" value="1"/><br />
			密码:<input type="password" name="userPwd" maxlength="6"id="userName"/><br />
			性别:男<input type="radio" name="userSex" value="man" checked="checked"/>
			     女<input type="radio" name="userSex" value="man" /><br />
		    爱好：唱歌<input type="checkbox" name="userhobby" value="sing" disabled="disabled"/>
			      跳舞<input type="checkbox" name="userhobby" value="dance" />
				  说唱<input type="checkbox" name="userhobby" value="rap" /><br />
			生日：<input type="date" name="userDATE"  /><br />
			头像：<input type="file" name="userHead"/><br />
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image"  src="img/loii.PNG"/>
</form>

3.textarea标签 

可通过cols和rows属性来规定文本框的尺寸（文本框所能看到的部分，可以输入很多数据，但是可见范围只有文本框大小，是有限的），cols规定文本框内的可见宽度，rows规定文本框的可见行数。它是一个双标签，同样它也是一个表单元素，需要写上name值。文本写在双标签之间，对比input，文本是写在input的value值里面。

例如：

简介：<textarea name="remark" cols="50" rows="5">111111</textarea>

4.label标签

label标签为input元素定义标注（标记）功能是聚焦

label标签的for属性应该与相关元素的id属性相同

<label for="userName">姓名</label>:<input type="text" name="userName" id="userName"/><br />

5.button标签

按钮(默认是提交按钮)

<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

6.select标签

用于定义下拉列表

属性：

       disabled：禁用该下拉框

       multiple：规定可选择多个选项

       size：规定下拉列表中可见选项的数目

       name：规定下拉列表的名称

<select name="">

          <option  value="">文本</option>

</select>

注：当option设置了属性值时，提交的数据是value对应的值，没有设置时，提交的是数据是文本值

<select name="city">
				<option>请选择城市</option>(默认选用第一个)
				<option>北京</option>
				<option>上海</option>
				<option>杭州</option>
</select>

常用字符实体

<   &lt

>   &gt

空格   &nbsp

版权符  &copy

       注：1.不是在form标签里面的元素就是表单元素，表单元素基本上要设置name值，有的不需要，比如按钮。

            2.input里面一般都需要设置type，name，value看情况（单选框，多选框，隐藏框必须设置value）

            3.type，value是设置给用户看的，name是传递给服务器的 。