1.文本选择框 选择你的头像:<input type="file" accept="image/*"> Image/*表示选择所有类型的图片 “/”后面可选择更详细的类型 简历(文档):
<input type="file" accept="application pdf/或者.doc">可以选择文本 accept属性选择文件的类型 2.上传文件需指定对应表单的属性
<form enctype="multipart/form-data"> </form>2.下拉列表 使用下拉列表 (1)节省空间,干净整洁 (2)方便输入方便选择 (3)更加规范 select是选择的意思 给它一个容器 option是选项的意思 在容器里的各个选项 你来自:
<select name="province"> <option value="33">浙江</option> <option value="32">江苏</option> <option value="41">河南</option> <option value="36">江西</option> </select>1.select相当于一个黑盒子把它取名为下拉列表 2.option相当于黑盒子里面的选项 3.select这个黑盒子里面的name相当于定义了各个选项的名字 将他们分组 4.value定义为各个选项传递后的参数值 比如将浙江提交: 得到结果如下: 3.multiple 1.这个可以实现下拉列表的多选
<select name="color" multiple> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="green">绿色</option> <option value="yellow">黄色</option> <option value="black">黑色</option> </select>比如这样选择: 得到这样的结果: 这里的多选可以ctrl+鼠标左键 <select>标签中可以加size定义下拉显示个数,如果选的个数小于黑盒子里面的个数将增加一个滚动条
<select > <optgroup label="中国"> <option value="1">帅哥</option> <option value="2">帅哥</option> <option value="3">帅哥</option> </optgroup> <optgroup label="日本"> <option value="1">平常</option> <option value="2">平常</option> <option value="3">平常</option> </optgroup> </select>2.这里的<optgroup>可以进行分组 <optgroup>中的<label>是将他们分组取名 设置disabled将使这分组不可被选择
3.Textarea(自学)标签主要是为了方便用户输入比较多的文字信息,rows属性指定能输入多少行数,cols属性指定能输入多少列数 备注:
<textarea cols="50" rows="30" name="备注"></textarea>4.Fieldset(自学)当信息比较杂乱时进行修饰在表单外面构架一个框框使其更加清晰,legend属性是给一个分组进行命名
<fieldset> <legend>用户登陆</legend> <form action="哈哈哈.html" method="post"> 姓名:<input type="text"name="name"> <br> 性别:...... <br> 年龄:...... <br> 学校:...... <br> 专业:...... <br> 工作单位:...... <br> 职务:...... <br> 帐号:<input type="text"name="name"> <br> 密码:<input type="password"name="password" > <br> <input type="submit" value="登陆" > <input type="reset" value="重填" > </form> </fieldset>3.隐藏域
<form action="哈哈哈.html"method="get"> <input type="hidden"name="stuNo"value="123456789"> <br/> 原密码:<input type="password" name="old"> <br/> 新密码:<input type="password" name="new"> <br/> <input type="submit" value="修改密码"> </form>1.向服务器传递参数,但是用户不需要输入或者不想让别人看见 可以使用hidden使其隐藏或者readonly使其只读 4.表单的总结 1.form相当于一个容器 action是指这个容器该往哪提交 当method为post时 提交了参数是看不到的 然后我们可以查看头部 打开F12调试窗口 点击network 头部有四种数据: headers: General: Response Headers Resquest Headers Form Data 常见的网页状态: http://blog.csdn.net/zll01/article/details/5018413 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务器超时 4.table(表格) 1.表格 表格标题 表格的组成部分:标题、表头、主题、表尾 <table>定义一个表格 将这个容器取名为表格 <caption>定义一个表格的标题 这个容器的新名字 <thead>定义表头的部分用th有加粗样式 <tbody>定义表格主题用td没有加粗样式 <tfoot>定义表尾,一般显示汇总信息等 <tr>定义一行 每个部分里面的一个小容器 <th>表头使用 <td>定义一个数据项(单元格)表身主题用 <td>的rowspan和colspan分别定义单元格跨行的行数、跨列的列数