课程任务
- form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
HTML 表单用于搜集不同类型的用户输入。
常见input标签及其作用:
<input type="text">:定义用于文本输入的单行输入字段(默认宽度为20个字符)
<input type="password">:定义密码字段
<input type="radio">:定义单选按钮,允许用户在有限数量的选项中选择一个
<input type="checkbox">:定义复选框
<input type="submit">:定义用于向表单处理程序提交表单的按钮。
<input type="button">:定义按钮
<input type="number">:用于应该包含数字值的输入字段
<input type="date">:用于应该包含日期的输入字段
<input type="color">:用于应该包含颜色的输入字段,根据浏览器支持,颜色选择器会出现输入字段中。
特别注意的一个类型:
type=hidden
通常称为隐藏域:如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。
总之,你在页面中是看不到hidden在哪里。最有用的是hidden的值。
<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
</form>
<script>
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>
(举例:这个属性常常被用在表单提交时生成一个随机的码,服务器可以根据这个码验证请求是否过期,用于防止恶意的多次请求发送。)
- post 和 get 方式的区别?
- 安全性
如果用get提交一个验证用户名和密码的form,一般认为是不安全的,因为用户名和密码将出现在URL上,进而出现在浏览器的历史记录中。
显然,在对安全性有要求的情况下,应该使用post。 - 提交数据的长度
IE将请求的URL长度限制为2083个字符,从而限制了get提交的数据长度,如果URL超出了这个限制,提交form时IE不会有任何反映。
3.缓存
由于一个get得到的结果直接对应到一个URL,所以get的结果页面有可能被浏览器缓存,而post一般不能。
正确使用:
如果提交请求纯粹只是从服务器端获取数据而不是进行其他操作,并且多次提交不会有明显的副作用,应该使用get。
比如:搜索引擎的查询(http://www.google.com/search?q=abc)
如果提交这个请求会产生其他操作和影响,就应该使用post。
比如:修改服务器上数据库中的数据;发送一封邮件;删除一个文件等
参考:form表单中method的get和post区别
3.在input里,name 有什么作用?
name 属性规定 input 元素的名称,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
- radio 如何 分组?
把radio同组的name属性设为相同。
举例:
<input type="radio" name="sex" value=“man">男
<input type="radio" name="sex" value="woman">女
- placeholder 属性有什么作用?
placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。
6.type=hidden隐藏域有什么作用? 举例说明
隐藏域在页面中,用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。
具体的例子 问题1已经简单介绍,不再赘述。
- 写一篇博客简单介绍 HTML 表单的用法,附上博客链接
8.实现如下表单,附上预览地址。其中性别和取向是单选,爱好是多选
作品:用jsbin实现