Web前端-HeadFirst-笔记-Ch14-表单
来源:互联网 发布:ae软件图标 编辑:程序博客网 时间:2024/05/25 05:36
表单form
在浏览器中的工作流程:
- 浏览器加载页面:遇到表单元素时,在页面上创建控件。
- 用户输入数据
- 提交表单:浏览器打包数据,发送给服务器。
- 服务器响应:服务器得到表单数据后,交给合适的脚本处理,得到一个新的html页面,返回给浏览器。
HTML语法
- <form action="URL服务器脚本" method="post/get">
get:打包表单变量,将数据追加在url的最后,向服务器发送请求。用户可以在地址栏看到编码后的数据。普通请求。
- <input type="text/submit/radio/checkbox" name="脚本查询时使用/单(多)选同一个选择name相同"value="空/单(多)选区分选项">
- <input type="number" max="" min="">
- <input type="range" max="" min="" step="">
- <input type="color">如果浏览器不支持颜色输入选择,则会得到一个文本输入控件。
- <input type="date">
- <input type="email"> <input type="tel"> <input type="url">移动浏览器会跳出适应的键盘
- <textarea name="元素的唯一的名字" rows="文本区高度为多少个字符" cols="宽度为多少个字符">显示在框内内容</textarea> 可以使用CSS指定文本区的高宽,无法限定字符数。
- <select name="菜单的唯一名字">
<option value="菜单项的值">显示的菜单项</option>
</select>
- 当表单没有包含全部元素,是否可以履行订单,取决于服务器脚本的编写。
- 在表单变量名中添加【】可以提示服务器脚本此变量可能包含多个值。
html表单元素
1. 表单元素的标签:<label>
- <lable for="id名">显示名</lable>
- <input type="" id="id名" name="可与id名相同" >
- 为单选钮以及复选框增加标签时,一组中所有控件的名字相同,但每个空间的id唯一。
- lable与input的相对位置无关,只要for与input的id相对应即可。
2. 组织表单元素在一起:fileset - legend
类似于div
<fileset>
<legend>显示名</legend>
<input type="" name="" value=""><lable for="">显示名</lable>
<input type="" name="" value="">显示名
</fileset>
3. 向服务器脚本发送整个文件
<input type="file" name="">
4. 将单选菜单变为多选菜单:multiple布尔量属性=不再显示一个下拉式菜单,得到一个多选菜单,选择时按下control或者Command。
<select name="" multiple>
<option value=""> 显示</option>
</select>
5.<input Placeholder="">在输入框中显示提示示例
6. required 可以用于任何表单控件,表示必填。
7.password 与text相似,输入的文本会掩码
<input type="password" name="secret">
表单的CSS布局:
将表单以表格形式显示。
html要求
- 给所有表单元素加<p>使之成为块元素。
- 将为同一行的元素分为一个<div>中,加class定义行。
- 一些特殊元素加class类标记。
- 空白格显示加<p>(空)</p>
CSS:
body{
background:背景图片设置 颜色设置等;margin:;}
form{
display:table;
padding:px;
border:;
background-color:;}
form textarea{ width:px; height:px;}设置表单中的textarea元素的显示大小。
div.tableRow{ display:table-row;}使class=tableRow的元素显示为表格的行。
div.tableRow p{
display:table-cell;
vertical-align:top;
padding:px;}使行中的每个块元素显示为一个单元格,内边距(增加行间距)。
div.tableRow p:first-child{
text-align:right;}使用伪类first-child,使一行中的第一个表格右对齐。
p.其他class{ 按需求设置属性;}
阅读全文
0 0
- Web前端-HeadFirst-笔记-Ch14-表单
- Web前端-HeadFirst-笔记-图片-height width
- Web前端-HeadFirst-笔记-html规范
- Web前端-HeadFirst笔记-CH9 盒模型
- Web前端-HeadFirst-笔记-CH10-子孙选择器
- Web前端-HeadFirst-笔记-Ch11-三布局
- Web前端-HeadFirst笔记-CH11-定位
- Web前端-HeadFirst笔记-CH9-多个样式表-media
- Web前端-HeadFirst笔记-CH9-Class与id
- Web前端-HeadFirst笔记-CH10 span div 伪类
- Web前端-HeadFirst-笔记-Ch10-层叠与特定性计算
- Web前端-HeadFirst-笔记-CH10-简写vs长形式
- Web前端-HeadFirst-笔记-Ch11-流,float,分栏
- Web前端-HeadFirst笔记-Ch12-HTML5新标记
- Web前端-HeadFirst-笔记-Ch12-h5的视频实现
- Web前端-HeadFirst-笔记-Ch13-表格与列表
- Web前端(表单)基础知识笔记(3)
- Web前端-HeadFirst-CH7-CSS入门
- 1017. A除以B (20)
- IPC机制
- OSI七层与TCP/IP五层网络架构详解
- Gold Balanced Lineup POJ
- SHELL 的一些简单的用法
- Web前端-HeadFirst-笔记-Ch14-表单
- 633. Sum of Square Numbers
- JDBC之DatabaseMetaData
- ACM练习题(day001)
- 深入c语言_作用域
- 712总结
- 函数组织方式
- 一个合格的程序员应该读的30本书
- 原型模式