【2017-03-21】HTML表单及标记

一、表单

表单在网页中主要负责数据采集功能

表单格式

<form action="服务器路径" method=get（用的比较少）/post(最常用)></form>

二、表单元素/标记

⑴文本类

<input type="text"/>             文本框              size=""文本框宽度

常见用法：value="值"    文本框默认显示的内容，可以修改，重置后恢复默认内容，该值可以提交到服务器

              placeholder="值"    值为灰色显示内容，输入内容后自动消失，重置后恢复默认内容，该值无法提交到服务器

<input type="password" />     密码框     size=""密码框宽度         用户输入后显示为●●●，用法与文本框一致

<textarea>    </textarea>      文本域   (没有value值)    cols=""文本域宽度   rows=""文本域高度，若没有输入参数可以通过拖动右下角角标改变文本框大小         

<input type="hidden" />         隐藏域        访问者隐藏域不可见

⑵按钮类

<input type="button"/>        普通按钮     value=""按钮显示文字

<input type="submit"/>        提交按钮     默认显示"提交"，value=""更改按钮显示的内容

<input type="reset"/>          重置按钮，清空当前表单内容    默认显示"重置"，value=""更改按钮显示的内容

<input type="image" src="图片路径">          图片型提交按钮

⑶选择类

<input type="radio"/>文字           单选型选择        name=""对多个单选选项进行分组,checked="checked"默认选择项

点击文字选择   <input type="radio"  name="sex"  id="man" /><lable for="man">男</lable> 

                    <input type="radio"  name="sex"  id="women"/><lable for="women">女</lable> 

<input type="checkbox"/>文字     多选型选择        name=""对多个多选选项进行分组,checked="checked"默认选择项

                    <input type="checkbox" name="fruit" id="apple"/><lable for="apple">苹果</lable>                   

                    <input type="checkbox" name="fruit" id="banana"/><lable for="banana">香蕉</lable> 

                    <input type="checkbox" name="fruit" id="pear"/><lable for="pear">梨</lable> 

<select>                                    下拉列表选择        

   <option>选择1</option>

   <option>选择2</option>

   <option>选择3</option>

</select>                    

<input type="file" />                   文件上传