form学习笔记

最新推荐文章于 2024-09-10 14:15:01 发布

伪伪的喵喵

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量292

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/qq_32392057/article/details/60784278

版权

学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

`from`学习笔记

学习《HTML权威指南》,学习笔记

表单

核心元素
- form
- input
- button
配置表单
- 配置action
- 配置http
- 配置数据编码
- 实现表单的自动完成功能
- 指定表单表单反馈信息的目标反馈位置
- 设置表单名
其他功能
- 添加说明标签
- 自动聚焦
- 禁用单个input属性

- 对表单元素进行编组

核心元素

form

告诉浏览器它处理的是HTML表单

局部属性

action method enctype name accept-chart novalidate target autocomplete

内容

流元素

习惯样式

    form {
        display: block; margin-top: 0em;
    }

设置表单外的元素

将元素的form属性设置为form元素的id

input

input元素的属性29，具体的取值取决于type属性的值
除input元素，还有其他一些其他元素用来收集用户输入的数据

局部属性

name disable form type 以及取决于type属性值的一些属性

内容

习惯样式

button

局部属性

name disable form value autofocus 以及取决于type属性值的一些属性

内容

短语内容

习惯样式

`type`属性的值

submit
- 额外属性
- form formaction formenctype formmethod formtarget formnovalidate
- 覆盖form元素上的设置
reset
- input元素重置为初始状态
button
- 当一般元素使用，按下不做任何事情

查看表单元素

    var http = require('http');
    var querystring = require('querystring');

    http.createServer(function (req, res) {
        switch(req.url) {
            case '/form':
                if (req.method == 'POST') {
                    console.log("[200]" + req.method + "to" + req.url);
                    var fullBody = '';
                    req.on('data', function (chunk) {
                        fullBody += chunk.toString();
                    });
                    req.on('end', function() {
                        res.writeHead(200, "OK", {'Content-Type': 'text/html'});
                        res.write('<html><head><title>Post data</title></head><body>');
                        res.write('<style>th, td{text-align:left;padding:5px;color:black}\n');
                        res.write('th {background:grey, color:white;min-width:10em}\n');
                        res.write('td {background:lightgrey}\n');
                        res.write('caption {font-weight:bold}</style>');
                        res.write('<table border="1"><caption>Form Data</caption>');
                        res.write('<tr><th>Name</th><th>value</th>');

                        var dBody = querystring.parse(fullBody);
                        for (var prop in dBody) {
                            res.write("<tr><td>" + prop + "</td><td>" + dBody[prop] + "</td></tr>");
                        }
                        res.write("</table></body></html>");
                        res.end();
                    });
                } else {
                    console.log("[405]" + req.method + "to" + req.url);
                    res.writeHead(405, "Method not supported", {'Content-Type': 'text/html'});
                    res.end('<html><head><title>405 - Method not supported</title></head><body>' +
                        '<h1>Method not supported.</h1></body></html>');
                }
            break;
            default:
                res.writeHead(404, "Not Found", {'Content-Type': 'text/html'});
                res.end('<html><head><title>404 - Not Found</title></head><body>' +
                        '<h1>Not Found.</h1></body></html>');
                console.log("[404]" + req.method + "to" + req.url);
        };
    }).listen(1337,"localhost",function(){
        console.log("listened");
    });

配置表单

配置`action`属性

如果不设置form元素的action属性，则浏览器会将表单元素发送到用以加载HTML文档的URL

`base`属性

如果action属性指定的是一个相对URL,那么该属性会嫁接在当前网页的URL

使用base属性，则为该元素的href的后面；
base元素将影响HTML文档的所用URL,不只是from元素

配置`HTTP`的方法

method属性指定表单数据发送到HTTP的方法

`method` 允许值

get (默认)
- 用于请求安全交互
- 同一个请求可以发出任意多次而不产生额外作用
- 应用于获取只读信息
post
- 用于不安全交互
- 数据的提交会导致一些状态的改变
- 应用于会改变程序状态的各种操作

配置数据编码

enctype属性指定了浏览器发送给服务器的数据采取的编码格式

`enctype` 允许值

application/x-www-form-urlencoded(默认)
- 出不能用来上传文件到服务其外，适用于任何类型的表单
- 各项数据的数值和名称与URL采用相同的编码方案
- fave=Apple$Name=Adam+Freeman;
- 特殊字符替换成了相应的HTML实体；
multipart/form-data
- 更为冗长，处理更麻烦
- 一般用于上床文件到服务器
text/plain
- 没有正式的规范不建议使用

表单的自动完成功能

浏览器记住用户输入表单的数据，相同状况下帮用户填写

autocomplete属性允许值为on off，默认为on;
form和input具有该属性，input覆盖form；

表单反馈位置

默认情况下提交表单反馈的信息替换表单所在的原页面

target属性决定

_blank
_parent
_self (默认)
_top
frame

设置表单名称

name属性为表单设置独一无二的标识符，以便使用DOM时区分各个表单

id在HTML多半用于css选择器

form提交表单时name属性值不会发送给服务器，用处仅局限于DOM`
input不设置name用户输入数据不会提交给服务器

添加说明标签

`lable`

局部属性

for form

内容

短语内容

习惯样式

    lable {
        cursor: default;
    }

<p><lable for="fave">Fruit: <input id="fave" name="fave"></lable></p>
for属性设置为id值，有助于屏幕阅读器等对表单的处理

自动聚焦

用户能直接输入不用手动选择它

autofocus
只能设置在一个input属性上，
多个设置该属性，聚焦于最后一个元素

禁用单个`input`元素

disabled属性

对表单元素进行编组

`fieldset`

局部属性

name form disabled

内容

流元素，开头可以设置一个legend元素

习惯样式

    fieldset {
        dispaly: block; margin-start:2px;
        margin-end:2px;padding-before:0.35em;
        padding-start:0.75em;padding-end:0.75em;
        padding-after:0.625em;border:2px groove;
    }

为`fieldset`元素添加说明标签`legend`

局部元素

内容

短语内容

习惯样式

    legend {
        display: block; padding-start: 2px;
        padding-end: 2px; boder: nome;
    }

`fieldset`禁用整组`input`元素

设置fieldset元素为disabled

伪伪的喵喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

form学习笔记

from学习笔记

表单

- 对表单元素进行编组

核心元素

form

局部属性

内容

习惯样式

设置表单外的元素

input

局部属性

内容

习惯样式

button

局部属性

内容

习惯样式

type属性的值

查看表单元素

配置表单

配置action属性

base属性

配置HTTP的方法

method 允许值

配置数据编码

enctype 允许值

表单的自动完成功能

表单反馈位置

设置表单名称

添加说明标签

lable

局部属性

内容

习惯样式

自动聚焦

禁用单个input元素

对表单元素进行编组

fieldset

局部属性

内容

习惯样式

为fieldset元素添加说明标签legend

局部元素

内容

习惯样式

fieldset禁用整组input元素

`from`学习笔记

`type`属性的值

配置`action`属性

`base`属性

配置`HTTP`的方法

`method` 允许值

`enctype` 允许值

`lable`

禁用单个`input`元素

`fieldset`

为`fieldset`元素添加说明标签`legend`

`fieldset`禁用整组`input`元素