HTML第十四章总结 HTML forms
第十四章主要讲了 html forms,通过 forms,我们可以得到 customers' feedback,使得网页能够 interactive,本章的内容分为三个部分:
- forms 的 element 以及它们的 attribute.
- forms 进行交互的原理
- 如何对 forms 进行 style
How forms work?两个方面阐述
Web Server 的角度
接收
- 当 visitor 在一个网页上 fill out the form 并且之后 submit 了之后
- Browser pakages up all the data in the form and sends it over to the Web Sever.
- 然后Web Server 接收到之后,再将其传给里面的 Server Script 去让它 process
###返回 - Server Script 对 data 进行 process 了之后,创建一个新的 HTML 文件,然后把它传给 Web Server
- Web Server 得到这个 HTML 文件之后,将它再传给 Browser.
- 然后 Browser 得到这个界面并且 display it.
Browser 的角度
- 当它 encounter 到 element 的时候,开始 create 相关的 controls, 所谓的 control 是:allow you to input various kinds of data 的地方。
- 当 visitor fill out 了 form 之后,并且进行了 submit, Browser 将 data 进行 package up,然后将它发送给 Web Server.
- 最后,接收到 Web Server 返回来的文件,然后 display it.
语法以及相关的 attribute
关于<form>
形式:
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
/*(Everything inside the form)*/
</form>
参数:
- action:这个 attribute 包含了 Web Server 的 URL 以及Server Script 的位置。
- method 分为两种: POST 和 GET,
</form>
这个 closing tag 用来 ends the form
关于 method 这个 attribute
GET :会在发送给 Web Server 之前 显示 append the data on the end of the URL ,并且你可以 bookmark 这个网址,缺点每次打开这个网址时,会 resubmited the order,所以不适用于 order 或者 密码,个人信息等网页
POST:你不能 bookmark 这个网址。但是更加安全,没有办法通过 History 查看,可以用于 密码,个人信息等网站。
form elements that create controls 关于<form>
中的 element
<input>
类型:
形式:<input type="" name="address">
经典的 type attribute:
- type="text" name=""
- type="submit":可以通过“value="Order Now""这个 attribute 来更改其显示的内容。
- type="radio" name="hotornot" value="not"
- type="checkbox" neme="spice[]" value="Garlic"
HTML5 中的 type attrubute:
- type=" tel\url\e-mail ":实质上是一种 text 类型的 input ,但是在手机上显示的时候可以控制其 UI,比如显示相应的数字键盘。
- type="number min="0" max="20" 可以设置 max 和 min 这两个 attribute 来设置其最大值和最小值,数字都为整数。
- type="color"
- type="range" max="0" max="20" step="5" :这个 attribute 和 number 很相似,但是是以 slider 的方式显示的,其中的 step 为一个 optional attribute.
- type="date"
其他类型
- textarea
<textarea name="comments" rows="10" cols="48">
</textarea>
用于 create a multiline text area that you can type into ,其中的 cols 和 rows 用于限制 text area 的宽度和高度。在<textarea>
和</textarea>
之间的内容鬼称为 initial text in the browser's text area control - select 和 option
<select>
和<option>
是一对搭档,互不分离,select 用于 create a menu control in the web page.select 用于create every menu item.它的形式是:
<select name="characters">
<option value="Buckarpp">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
</select>
关于 name 这个 attribute
How form element "name" work:
It acts as the glue between your form and the server script that processes it.
在 Browser 向 Web Server 传递信息的过程中,Browser send the names and values to the server.
注意
- 这里的 name 需要注意的是:它是由 Script 所限定的,不是自定义的,写 Script 的人应该 tell you what names to use, or provide that information in the documentation for the script.
2.<option>
没有name,但是<select>
有,原因在于name 的原理 - 对于 checkbox 和 radio 来说,由于它们 come as a set ,所以对于一系列选项来说,它们的 name 是相同的。
实际操作: Back to get those <input>
into your HTML
需要注意的是:
1.<input>
是一种 inline element,一方面为了美观整齐,用<br>
换行;另外一方面,整个相关联的数据用<p>
包括起来。
- 在
<input>
之前或者之后添加lable,作为表明给 visitor 的要输入的数据。
其他小知识:
- 如果想要在
<radio>
<checkbox>
中默认选择一项,那么就用 checked 这个 boolean attribute. - 在 CSS 中可以用 table display 对 form 进行设计
- 其他attribute:
placeholder\required 可以进行提示和限制必须填写,其中 required 是一个 boolean 类型的数据
multiple 是可以在<select>
中添加的,显示的时候不再是下拉列表,而是数据的全部排列,可以使用 control 键进行多选。
type="file"可输入文件类型数据
type="password"可输入密码类型数据
用<fieldset>
来 group together comman elements,配合使用<legend>
来显示标题。<lable for="">
中的 for 这个 attribute 是 form element 中的 id 的名称,所以创建 lable 有两个步骤: 创建 element 的id
然后创建 lable 设定 for 的值
HTML第十四章总结 HTML forms的更多相关文章
- JavaScript高级程序设计:第十四章
第十四章 一.表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在javascript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继 ...
- 《Linux命令行与shell脚本编程大全》 第十四章 学习笔记
第十四章:呈现数据 理解输入与输出 标准文件描述符 文件描述符 缩写 描述 0 STDIN 标准输入 1 STDOUT 标准输出 2 STDERR 标准错误 1.STDIN 代表标准输入.对于终端界面 ...
- perl 第十四章 Perl5的包和模块
第十四章 Perl5的包和模块 by flamephoenix 一.require函数 1.require函数和子程序库 2.用require指定Perl版本二.包 1.包的定义 2.在包间切 ...
- Gradle 1.12 翻译——第十四章. 教程 - 杂七杂八
有关其它已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或訪问:http://gradledoc.qiniudn.com ...
- C和指针 (pointers on C)——第十四章:预处理器
第十四章 预处理器 我跳过了先进的指针主题的章节. 太多的技巧,太学科不适合今天的我.但我真的读,读懂.假设谁读了私下能够交流一下.有的小技巧还是非常有意思. 预处理器这一章的内容.大家肯定都用过.什 ...
- CSS3秘笈复习:十三章&十四章&十五章&十六章&十七章
第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...
- C#语言和SQL Server第十三 十四章笔记
十三章 使用ADO.NET访问数据库 十四章使用ADO.NET查询和操作数据库 十三章: ...
- Gradle 1.12用户指南翻译——第二十四章. Groovy 插件
其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...
- Gradle 1.12用户指南翻译——第三十四章. JaCoCo 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
随机推荐
- 20155201 网络攻防技术 实验八 Web基础
20155201 网络攻防技术 实验八 Web基础 一.实践内容 Web前端HTML,能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. We ...
- Django缓存系统
在动态网站中,用户每次请求一个页面,服务器都会执行以下操作:查询数据库,渲染模板,执行业务逻辑,最后生成用户可查看的页面. 这会消耗大量的资源,当访问用户量非常大时,就要考虑这个问题了. 缓存就是为了 ...
- media静态文件统一管理 操作内存的流 - StringIO | BytesIO PIL:python图片操作库 前端解析二进制流图片(了解) Admin自动化数据管理界面
一.media ''' 1. 将用户上传的所有静态文件统一管理 -- settings.py -- MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2. 服务 ...
- minicom支持向串口自动发送命令的功能
1. 用法 minicom -S <script name> -C <log name> 参数解析: -S: 指定要执行的脚本 -C: 指定输出日志文件名 2. 既然可以指定脚 ...
- ubuntu18.04智能拼音候选字体调节方法
原文链接:https://jingyan.baidu.com/article/1974b2895a737ef4b1f774f1.html 1.原来ibus框架的拼音输入法,候选字的大小,可以在终端命令 ...
- Download and Installation of Kibana
下载以及安装 https://www.elastic.co/downloads/kibana 1.Download and unzip Kibana 2. Open config/kibana.yml ...
- 学习使用JUnit4进行单元测试
借用http://blog.csdn.net/andycpp/article/details/1327147等文章上面的例子和教程进行学习总结,自己敲了一遍代码,发现里面有些东西,可能版本原因,已经稍 ...
- (转载)WinformGDI+入门级实例——扫雷游戏(附源码)
本文将作为一个入门级的.结合源码的文章,旨在为刚刚接触GDI+编程或对相关知识感兴趣的读者做一个入门讲解.游戏尚且未完善,但基本功能都有,完整源码在文章结尾的附件中. 整体思路: 扫雷的游戏界面让我从 ...
- windows 上让文件类型和程序关联的批处理程序。
文件关联工具 地址: https://github.com/wll8/assoc-tool 本工具可以用来为你的便携程序添加文件关联,比如 nodepad2.exe . vscode 或其他图片处理程 ...
- 【Selenium2】【Jenkins】
1. 下载Tomcat ,Windows7 环境,http://tomcat.apache.org/ 我下载的是版本8 2. 下载Jenkins,Windows7 环境,http://jenkins ...