task 5

form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

搜集不同类型用户的输入内容,负责数据采集,采集到的数据将被提交给服务器
action=url
method=get/post
常用的input 标签:
<text>标签,单行文本输入框
<password>标签,密码输入,表现形式为圆点
<radio>标签,单选按钮
<checkbox>复选框
<file>文档
<image>图像形式的提交按钮
<reset>重置按钮,清除表单中的所有样式
<submit>提交按钮,把表单数据发给服务器
<button>可点击的按钮
<hidden>隐藏的输入字段

post 和 get 方式的区别?

get用来获取数据,post用来提交数据。

get请求的数据会在附在url中,get数据对所有人都是可见的。通过把所有数据拼接成key=value的形式连在一起,url和传输数据用?分割开来,参数之前以&相连,最终,空格转化为+,如果是中文/其他字符,则把字符串用BASE64加密,体现在url上。因此请求数据较多的话不适合用get,因为那会让url特别长。
post会把提交的数据放入http包的包体中。更加安全。

get提交的数据最多只能1024字节
post没有限制,可传输大量的数据

在input里,name 有什么作用?

name是input元素的名称,用于后台对提交的表单数据进行识别,或者在客户端通过js引用表单数据。

radio 如何 分组?

同一组radio中的name必须相同。

placeholder 属性有什么作用?

占位符,提示用户输入相应的内容。

type=hidden隐藏域有什么作用? 举例说明

隐藏域是用来收集或发送信息中的不可见元素,对于网页的访问者来说,隐藏域是不可见的。当表单被提交时,隐藏域会将信息用你的设置时定义的名称和值发送到服务器上。

可以防止CSRF攻击,通过后台随机生成的token在隐藏域中,用户提交时验证其合法性。

写一篇博客简单介绍 HTML 表单的用法,附上博客链接

实现如下表单,附上预览地址。其中性别和取向是单选,爱好是多选

https://jsbin.com/fimohileyu/edit?html,output

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容