整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

育知HTML5培训技术分享 HTML5新增表单元素及

育知HTML5培训技术分享 HTML5新增表单元素及新增属性

们已经学过了很多标签及标签属性了,这节课我们还要学一些HTML5对表单这一块做了专门的修改,就是增加了一些新的标签和新的属性。让表单结构更灵活。我们通过以下这几方面给大家讲解。

√新增表单元素

√新增表单属性-input属性

好了废话不多说,直接看代码吧!

一、 新增表单元素

a)email:用于输入单一email地址或者email地址列表,提交表单的时候验证输入值是否满足email格式。

b).url: 用于处理URL,在iPhone中非常好用,会出现对应的键盘布局,提交表单的时候验证输入值是否满足url的格式。

c).number:用于包含数字值的输入字段。您可以设置可接受数字的限制。根据你的设置提供选择数字的功能,其中min最小值,max为最大值

d).range:会以一个滑块的形式表现,包含一定范围内数字值的输入域,max为最大值,min为最小值,value为默认值,如果没有设置max和min,默认值是1-100

e).search:用于显示一个输入搜索关键字的表单,若加上result=”s”属性,则会在搜索框前面加一个搜索图标。

f).tel:用于输入电话号码,验证输入的是否是电话号码的格式。(以PC端无效果,在移动端使用该框时,会切换到数字键盘)

g).color:color类型会提供颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中。

h).date:用于日期选择的表单域,支持日期,月份,周。日期和时间类型

综合案例:

页面显示效果

二、新增表单元素属性(主讲input新增的属性)

a).autofocus: 在打开页面时使元素自动获取焦点 常给input,button,select,textarea 等标签使用

<input type="password" name="pwd" autofocus="autofocus"/>

给密码框使用之前

给密码框使用之后

b). placeholder: 在用户输入时进行提示常应用在input,textarea等标签

<input type="text" name="name" placeholder="请输入公司名称" />

c). required: 表明该元素是必填项,当提交表单的时候会自动验证该元素的内容是否不为空 常给

input,textarea等标签使用。

<input type="text" name="url" required="required" />

d). max/min/step限制值的输入范围,以及值的变化程度。新增number元素有介绍。 常给input标签使用。

<input type="number" name="age" step="5" min="10" max="25"/>

e). autocomplete:使form元素或者input元素拥有自动完成功能,既记录用户之前输入的值,

关闭为off,默认为on。 常给form,input使用

<input type="url" name="url" autocomplete="off"/>

值为off时:

值为no时:

f). multiple: 在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传,或者给select标签使用

<input type="file" name="file" multiple="multiple" />

h). formaction:重写表单的action属性, formmethod: 重写表单的method属性.

<input type="submit" value="提交" formaction="demo.html"

formmethod="post"/>

i). list特性和datalist 选值列表list属性的值为datalist元素的id,datalist元素类似于选择框,在文本框获

得焦点的时候以提示输入的方式显示。

地址:<input type="text" list="item" name="address"/>

<datalist id="item">

<option value="1">北京</option>

<option value="2">上海</option>

<option value="3">深圳</option>

</datalist>

显面效果:

j).新增form属性

在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素增加一个form属性,form属性的值为form表单的id。在form元素里面的表单元素可以不用添加form属性,如果你想利用form获取所有表单元素的值,那么在form元素外面的表单元素就必须添加form属性,input、select、textarea等元素都满足该功能。

代码:

以后我们再写页面的时候可以使用新增的标签及属性了,有了这些标签及属性对于我前端的开发人员来说,真是一大幸事啊!

在 HTML 中使用 <form> 表单元素在 JavaScript 中对应的是 HTMLFormElement 类型,而HTMLFormElement继承了HTMLElement接口:

interface HTMLFormElement extends HTMLElement {
    ...
}

因此,HTMLFormElement 除了与 HTMLElement有一样的属性和方法外,还有自己独有的属性和方法:

  • acceptCharset:服务器可以接收的字符集,等价于 HTML 的 accept-charset 属性。
  • action:请求的 URL,等价于 HTML 的 action 属性。
  • elements:表单中所有控件的 HTMLCollection
  • enctype:请求的编码类型,等价于 HTML 的 enctype 属性。
  • length:表单中控件的数量。
  • method:HTTP 请求的方法类型,通常是 getpost,等价于 HTML 的 method 属性。
  • name:表单的名字,等价于 HTML 的 name 属性。
  • target:用于发送请求和接收响应的窗口的名字,等价于 HTML 的 target 属性。
  • reset():把表单字段重置为各自的默认值,如果没有默认值,则为空。
  • submit():提交表单。

如果想要获取 <form> 表单元素的引用,需要使用 DOM 选择器进行查找,如 getElementById/getElementsByName/getElementsByClassName/getElementsByTagName/querySelector/querySelectorAll 这些方法,下面使用 getElementById() 方法获取表单,只要给表单设置一个 id 属性即可:

let form=document.getElementById("form-id");

Document中的<form>document.forms的成员,因此可以通过索引或表单的 name 来访问特定的表单。如下所示:

// 文档中第一个元素
let firstForm=document.forms[0];
// 取得名字为"form-name"的表单
let formName=document.forms["form-name"];

注意:表单可以同时拥有idname,且两者可以不相同。

提交表单

一般情况下,<form>表单元素是通过客户端用户点击的方式发送表单数据。而定义提交按钮主要有:

  • 定义使用 type=“submit” 属性值的 <input> 元素,如 <input type="submit" value="提交">
  • 定义使用 type="submit" 属性值的 <button> 元素,如 <button type="submit">提交</button>
  • 定义使用 type="image" 属性值的 <input> 元素,如 <input type="image" src="submit.gif">

这种方式提交表单会在请求之前触发 submit 事件。这就提供了一个验证表单数据的机会,可以根据验证结果来决定表单是否要提交。如下所示:

let form=document.getElementById("form-id");
form.addEventListener("submit", (event)=> {
    // 验证表单
    if (...) {
        // 验证失败后,就要阻止表单提交
        event.preventDefault();
        return;
    } 
    // 这里用于验证成功后将表单提交
});

调用 preventDefault() 方法可以阻止表单提交。通常,在表单数据无效以及不应该发送到服务器可以这样处理。

也可以调用submit() 方法提交表单,表单中不存在提交按钮也不影响提交。如下所示:

let form=document.querySelector("#form-id");
// 提交表单
form.submit();

通过 submit() 方法提交的表单,submit 事件不会触发。因此在调用这个方法前要先做数据验证。

表单提交的最大一个问题是可能会提交两次。如果提交表单后没有反应,那么没有耐心的用户可能会多次点击提交按钮。因此,解决这种方法主要有两种:表单提交后禁用按钮,或者通过 onsubmit 事件取消之后的表单提交。

重置表单

一般用户填写完表单信息后,想要重新填写时,可以使用重置按钮来重置表单。而定义重置按钮主要有:

  • 定义使用 type="reset" 属性值的 <input>元素,如 <input type="reset" value="重置">
  • 定义使用 type="reset" 属性值的 <button> 元素,如 <button type="reset">重置</button>

重置成功后,表单字段的值会重置为默认值;如果没有默认值,则会为空。

重置按钮可以触发 reset 事件。这个事件为取消重置提供了机会。如下所示:

let form=document.getElementById("form-id");
form.addEventListener("reset", (event)=> {
    event.preventDefault();
});

重置按钮也可以调用 reset() 方法完成重置操作:

let form=document.getElementById("form-id");
// 重置表单
form.reset();

reset()方法会触发 reset 事件 。

注意:表单设计中通常不提倡重置表单。

表单字段

表单元素可以像页面中的其它元素一样使用原生 DOM 方法来访问。此外,调用 elements 属性为表单的有序列表,包含表单中所有标签元素的引用,包括<input><textarea><button><select><fieldset>元素,并按照在 HTML 中出现的次序保存,通过索引和name属性进行访问。如下所示:

let form=document.getElementById("form-id");
// 取得表单中的第一个字段
let field1=form.elements[0];
// 取得表单中名为"textbox-name"的字段
let field2=form.elements["textbox-name"];
// 取得字段的数量
let fieldCount=form.elements.length;

如果多个表单控件使用同一个 name 值,比如 <input>元素设置type="radio"属性为单选,就会返回包含所有同名元素的 HTMLCollection。如下所示:

<form method="post" id="form-id">
    <ul>
        <li><input type="radio" name="sex" value="男">男</li>
        <li><input type="radio" name="sex" value="女">女</li>
        <li><input type="radio" name="sex" value="未知">未知</li>
    </ul>
</form>

因此,访问 elements["sex"] 返回的 NodeList 就包含着 3 个元素;而使用索引访问时,就会返回当前位置的元素。如下所示:

let form=document.getElementById("form-id");
let sexes=form.elements["sex"];
console.log(sexes.length); // 3
let index_one=sexes[1];
let form_one=form.elements[1];
console.log(index_one===form_one); // true

公共属性

除了 <fieldset> 元素以外,所有表单字段都有一组同样的属性。由于 <input> 类型可以表示多种表单字段,因此某些属性只适用于特定类型的字段。除此之外的属性可以在任何表单字段上使用。以下列出了这些表单字段的公共属性和方法。

  • disabled:布尔值,表示表单字段是否禁用。
  • form:指针,指向表单字段所属的表单。这个属性是只读的。
  • name:字符串,这个字段的名字。
  • readOnly:布尔值,表示这个字段是否只读。
  • tabIndex:数值,表示这个字段在按Tab 键时的切换顺序。
  • type:字符串,表示字段类型,如"checkbox"、"radio"等。
  • value:要提交给服务器的字段值。对文件输入字段来说,这个属性是只读的,仅包含计算机上某个文件的路径。

JavaScript 可以动态修改任何属性,当然,form属性除外。如下所示:

let form=document.getElementById("form-id");
let field=form.elements[0];
// 修改字段的值
field.value="修改后的值";
// 检查字段所属的表单
console.log(field.form===form); // true
// 给字段设置焦点
field.focus();
// 禁用字段
field.disabled=true;
// 改变字段的类型(不推荐,但对<input>来说是可能的)
field.type="checkbox";

动态修改表单字段属性的能力为修改表单提供了方便。如当点击两次提交按钮时,会在第一次提交后,通过监听submit事件来实现禁用提交按钮。如下所示:

// 避免多次提交表单的代码
let form=document.getElementById("form-id");
form.addEventListener("submit", (event)=> {
let target=event.target;
// 取得提交按钮
let btn=target.elements["submit-btn"];
// 禁用提交按钮
btn.disabled=true;
});

以上代码,通过监听 submit 事件,并在函数中获取按钮并设置disabled=true,来达到提交按钮禁用。注意:这个功能不能通过直接给提交按钮添加 onclick 事件进行实现,原因是不同浏览器触发事件的时机不一样。有些浏览器会在触发表单的 submit 事件前先触发 onclick 事件,有些浏览器会后触发 onclick 事件。对于先触发 onclick 事件的浏览器,这个按钮会在表单提交前被禁用,这意味着表单不会被提交。因此,最好使用表单的 submit 事件进行禁用提交按钮。但这种方式不适用于没有提交按钮的表单提交,因为,只有提交按钮才能触发 submit 事件。

type 属性可以用于除<fieldset>之外的任何表单字段。对于<input>元素,这个值等于 HTML 的 type 属性值。对于其他元素,这个 type 属性的值按照下表设置。

描述

示例HTML

类型的值

单选列表

<select>...</select>

"select-one"

多项列表

<select multiple>...</select>

"select-multiple"

自定义按钮

<button>...</button>

"submit"

自定义非提交按钮

<button type="button">...</button>

"button"

自定义重置按钮

<button type="reset">...</button>

"reset"

自定义提交按钮

<button type="submit">...</button>

"submit"

对于<input><button>元素,可以动态修改其 type 属性。但<select>元素的 type 属性是只读的。

公共方法

每个表单字段都有两个公共方法:

  • focus():把浏览器焦点设置到表单字段,该字段会变成活动字段并可以响应键盘事件。
  • blur():从元素上移出焦点,焦点不会转移到任何特定元素,仅仅是从调用这个方法的元素上移除。

给一个 focus() 方法的例子:

window.addEventListener("load", (event)=> {
    document.forms[0].elements[0].focus();
});

上述情况就是在页面加载后,把焦点定位到表单中的第一个字段。注意:如果表单中第一个字段是type="hidden"属性的<input>元素,或者该字段被 CSS 属性 displayvisibility 隐藏,以上代码就会出错。

在 HTML5 中,表单字段增加了 autofocus 属性,支持的浏览器会自动为带有该属性的元素设置焦点,无须使用 JavaScript。如下所示:

<input type="text" autofocus>

为了让之前的代码在使用autofocus时也能正常工作,必须先检测元素上是否设置了该属性。如果设置了 autofocus,就不再调用 focus()

window.addEventListener("load", (event)=> {
    let element=document.forms[0].elements[0];
    if (element.autofocus !==true) {
        element.focus();
    }
});

注意:默认情况下只能给表单元素设置焦点。不过,通过将 tabIndex 属性设置为–1 再调用focus(),也可以给任意元素设置焦点。

再给一个 blur() 的例子:

document.forms[0].elements[0].blur();

在浏览器支持 readOnly 属性之前,Web 开发者通常会使用这个方法创建只读字段。现在很少有需要调用blur()的了。

公共事件

除了鼠标、键盘、变化和HTML 事件外,所有字段还支持以下 3 个事件:

  • blur:字段失去焦点时,会触发该事件。
  • change<input><textarea>元素的 value 发生变化且失去焦点时触发,或者在<select>元素中选中项发生变化时触发。
  • focus:在字段获得焦点时触发。

blurfocus 事件是用户手动改变焦点或调用blur/focus方法时触发。change事件是因控件不同而改变触发时机。

  • <input><textarea>change事件会在字段失去焦点,同时 value 自控件获得焦点后发生改变时触发。
  • <select>change 事件会在用户改变选中项时触发,不需要控件失去焦点。

focusblur 事件通常用于改变用户界面,提供可见的提示或额外功能;change事件通常用于验证用户在字段中输入的内容。比如,有的文本框可能只限于接收数值,focus 事件用来改变控件的背景颜色以便更清楚地表明当前字段获得了焦点,blur 事件用于去掉这个背景颜色,change 事件用于在用户输入了非数值时把背景颜色改为红色。如下所示:

let textbox=document.forms[0].elements[0];
textbox.addEventListener("focus", (event)=> {
    let target=event.target;
    if (target.style.backgroundColor !="red") {
        target.style.backgroundColor="yellow";
    }
});
textbox.addEventListener("blur", (event)=> {
    let target=event.target;
    target.style.backgroundColor=/[^\d]/.test(target.value) ? "red" : "";
});
textbox.addEventListener("change", (event)=> {
    let target=event.target;
    target.style.backgroundColor=/[^\d]/.test(target.value) ? "red" : "";
});

上述代码中,onfocus 事件会把文本框的背景改为黄色,表明是当前活动字段。onbluronchange 事件会在发现非数值字符时把背景改为红色。为测试非数值字符,这里使用了简单的正则表达式来检测文本框的value。这个功能必须同时在 onbluronchange 事件上实现,确保无论文本框是否改变都能执行验证。

注意:blurchange 事件的关系并没有明确定义。在某些浏览器中,blur事件会先于 change 事件触发;在其它浏览器中,触发顺序会相反。因此不能依赖这两个事件触发的顺序,必须区分时要多加注意。

总结

HTML 和 ECMAScript 都更新了好几个版本,但是表单几乎从来没有改变。但是,通过 JavaScript 可以增加现有表单字段以提供新功能或增强易用性。也因此,表单字段也暴露了属性、方法和事件供 JavaScript 调用使用。

在开篇

什么是表单呢?当前端想要提交数据给后端,怎么搞?那么在前端开发中,表单是常用的手段,比如常见的场景有:登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中,笔者除了讲一些基本的知识点,还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。

盘点HTML表单基础

1. from元素

构建表单,主要是通过from元素,我们先来一个最简单的小栗子,看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息录入CMDB</h3>
        <form>
            <label for="hostname">主机名:</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址:</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图:

通上面的小栗子可以知道,form表单的主要通途是用于收集用户的输入。在from表单里面,还包含着各种不同类型的input元素,比如我们上面小栗子中用到的文本(text)、提交按钮(submit)。

input元素是表单里最重要的元素,它有很多type属性,下面我们来总结下:

类型描述text文本输入radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮

在上面小栗子中,除了input元素之外,不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签,且用for属性和input元素的id属性进行绑定呢。

2. 单选按钮

什么是单选按钮?就是在多个选项中,你只能选其中1个,不能多选。下面我们看个小栗子,看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>问答题1(单选):某站长,工作经验不足1年,仅从互联网收集学习资料制定学习路线售卖盈利,从道德层面角度分析是否有问题?</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>问答题2(单选):实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助?</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下图:

上面的小栗子中,出了两道问答题,均为单选题。那么,类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。

3. 复选框

什么是复选框?复选框就是可以选择多个选项,当需要多选的时候,使用复选框输入类型就对了。看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>问答题1(单选):某站长,工作经验不足1年,仅从互联网收集学习资料制定学习路线售卖盈利,从道德层面角度分析是否有问题?</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>问答题2(单选):实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助?</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图:

上面的小栗子中,实现复选框的输入类型是checkbox,这个是重点哦!

4. 提交按钮

当有数据要提交给后端的时候怎么搞?如果后端是API服务,可以给它提交json。如果是前端页面,就需要通过构建表单来获取用户的输入。基于表单提交数据给后端,怎么提交?需要一个可以点击的提交按钮,那这个按钮怎么来?先看下面代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图:

输入类型为submit,说明它就是提交按钮,注意上面代码type="submit"了吗?

HTML表单重要属性

1. Action属性

在之前的例子中,前端表单需要将数据提交给后端,除了需要一个提交按钮外,还需要action属性。当点击提交按钮后,表单的数据该发到后端的哪个url进行处理,就是定义在action属性中。接下来,我们结合前端和后端直接来个小实战,后端代码用Python的Flask框架。

前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码:

from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args=request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后,我们接下来看看效果

输入IP地址后,点击提交

这个ok是后端返回的

后端接收到数据后,啥也没做,只是做了简单打印

这个小栗子很简单,通过这个小栗子,是不是对action属性的用法有了进一步的理解呢?

2. Method属性

method属性的用途是指定提交数据的http方法,通常有2个,get和post。接下来我们在上个小栗子的基础上做个小改造,看下面代码

前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码:

from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args=request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后,提交表单时,直接告诉你这是不允许的方法

在这个例子中,是因为前端的表单了指定了method为get请求,而后端接收数据的method规定了需要post请求,故所以出现这个问题。

下面我们改造一下后端代码:

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的method还是保持get请求,再次提交,后端的返回如下:

看到了吗?后端判断前端过来的请求是get还是post,很显然,前端过来的请求是get,并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码,将请求修改为post,代码如下:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也稍微改造一下,改变接收前端数据的方法

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        a=request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输入IP地址,并点击提交

提交后,后端给前端返回了ok

接下来看下后端,后端啥也没做,就获取到表单的数据,然后打印了数据,并且打印了下数据类型

好了,关于前端的action属性和Method属性就讲到这里了。为了讲解action和method,还结合了后端的一丢丢知识,前端和后端的知识点以后都会慢慢讲到哈!

HTML表单常用元素

1. 下拉列表

先来个前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能:</label>
            <select id="opslist" name="opslist">
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码:

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        a=request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中选择“Go语言”,并提交

后端啥也没干,就只做了打印

2. 允许多选

前端代码:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区,公众号ID:TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能:</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中,是使用multiple属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整:

# coding: utf8
from flask import Flask, request

webapp=Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method=='POST':
        data=request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__=='__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift键可进行多选

后端打印的效果图下图:

写在最后

关于表单基础知识点的讲解就这么愉快的结束了,关于更多表单的元素、输入属性、输入类型可自行查阅和实战,笔者因时间有限就不一一演示。感谢您的阅读,望多多关注我们、点赞、转发!

本文转载于(喜欢的盆友关注我们):https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA