HTML5类型笔记2:离线系统表单设计

今于C代码中动用gets()时提醒“warning: this program uses gets(), which
is
unsafe.”,然后是序还会运行,无聊的自己开始查看资料,为底gets()会unsafe呢。

当此离线系统受到,表单无疑是构成此离线系统的视图部分,作为最前端,与客户的操作最缜密相关的平等块,所以我们有必要先了解一下HTML5的Forms API,它有如下特征: 

1、Stackoverflow

HTML5涵盖了大气之初的API和因素类型,如下:

新的输入型控件: 

类型

用途

input type=datetime

时间和日期输入框

input type=datetime-local

本地的时间和日期输入框

input type=date

日期输入框

input type=month 

年月输入框

input type=time

时间输入框

input type=week 

星期输入框

input type=number

数值输入框

input type=tel

电话号码输入框

input type=email

电子邮件地址文本框

input type=url

URL地址文本框

input type=search

用于搜索文本框

input type=range

特定范围的数值选择器,以进度条方式显示

input type=color

颜色选择器(这个不使用)

 

下面这些元素很多咱们会以相距线填报表单中用及,可以复制拿到Chrome浏览器中试试看:

 

日期格式文本框: 

<p> 

<label for=”date”>date类型:</label>

<input type=”date” id=”date”><span>请以新版Chrome中查看</span> 

</p>

 

日格式文本框: 

<p> 

<label for=”time”>time类型:</label>

<input type=”time” id=”time”><span>请在新版Chrome中查看</span> 

</p>

 

月格式文本框: 

<p> 

<label for=”month”>month类型:</label> 

<input type=”month” id=”month”><span>请在新版Chrome中查看</span> 

</p>

 

周格式文本框:

<p> 

<label for=”week”>week类型:</label> 

<input type=”week” id=”week”><span>请于新版Chrome中查阅</span> 

</p>

 

电话号码输入文本框: 

<p> 

<label for=”tel”>tel类型:</label> 

<input type=”tel ” id=”week”><span>请于新版Chrome中查阅</span> 

</p>

 

数值类输入文本框: 

value指的凡开时之默认值,min为极端小价,max为极端特别价值,step为增量与减量均为某某值, 

还是有值的倍数,如我们下是3,所以她仅是3,或者3底倍数: 

<p> 

<label for=”number”>number类型:</label> 

<input type=”number” name=”number” id=”number”  step=”3″ value=”3″ min=”0″ max=”4″  > 

<span>请于新版Chrome中翻</span> 

</p>

图片 1

 

滑动条Range:

限:value:指的凡始于时的默认值,min为无限小值,max为最深价值,step为增量与减量均为1,这边加了个

函数,用以实时显示range的进度条:

<p>

<label for=”range”>range类型:</label>

<input type=”range” id=”range” min=”1″ max=”100″ step=”1″ value=”36″ onchange=”changeRange(this.value)”/> 

<span id=”ShowRange” ></span>

<span>请以新版Opera或Chrome或Safari中查</span>

</p>   

function changeRange(rangeVal) {

            $(“#ShowRange”).html(rangeVal+”%”);

 }

图片 2

 

 

Placeholder:默认输入框描述文字: 

Placeholder:(placeholder指的凡默认的仿,当用户并未输入值的时节,输入型控件可以经过placeholder进行描述性说明或者提醒,当问题聚焦或者输入文本的早晚,placeholder会消失): 

<input type=”text” placeholder=”对文本框的叙述…” />

图片 3

  

Autocomplete : 自动就 

autocomplete=”on”,作用:保存输入值以备将来使,autocomplete=”off”,不保留,

autofocus=”autofocus”:默认载入聚焦

 

电子邮件文本框Email:

<p>

<label for=”email”>email类型:</label>

<input type=”email” name=”email” id=”email” placeholder=”请输入正确mail地址” />

<span>请于新版Chrome中查</span>

</p> 

Email文本框要求必须输入的凡不利的邮箱地址,否则的会晤有荒唐提示

图片 4

 

URL文本框:

<p>

<label for=”url”>url类型:</label>

<input type=”url” id=”url” autocomplete=”off” placeholder=”请输入是URL地址” autofocus=”autofocus”>

<span>请在新版的Chrome中查效果</span>

</p>

URL文本框要求必须输入的凡邮箱地址,否则的见面生出错提示: 

图片 5

 

Search搜索框:

富含搜索框样式的input控件,

<p>

<label for=”search”>search类型:</label>

<input type=”search” results=”n” id=”search”>

<span>请于新版Chrome中查阅</span>

</p> 

图片 6

 

套用之前的表单控件及其使用办法,并连发发展及搭新的控件和力量;

例子:

THE CONSTRAINT VALIDATION API(客户端验证API):

HTML5应用ValidityState对象来反映表单的证实状态

var checkResult = input.validity; 

if(checkResult.valid) console.debug(“验证通过”); 

else console.debug(“验证失败”); 

证实的通过或者失败取决于HTML5 引进的八种证约束原则,如果所有透过,则归True,只要来一个无经过,则回False。

 

1、 valueMissing

目的:确保表单控件被的值有填写

因而法:在表单控件中将required属性设为true

示例:<input type=”text” required=”true” />

图片 7 

 

2、 typeMismatch

目的:确保控件内的价值和控件的品类相同(如number,email,url)

故法:指定表单页面的type特征值

示例:<input type=”email” />

图片 8

 

3、 patternMismatch

目的:根据表单控件上设置的格式规则验证输入是否也有效格式。

为此法:在表单控件上设置pattern特性,井赋予适当的相当规则,title是您要是举报让用户的自定义错误信息。

示范:<input type=”text” title = “请填入数价,可以分包1-4个的小数”, placeholder = “请填入数值…”, pattern = “^[0-9]+(.[0-9]{1,4})?$”/>

图片 9

 

4、 tooLong

目的:避免输入值包含了多字符。

据此法:在表单控件上安装maxLength特性。

示例:<input type=”text” maxLength=”30″>

 

5、 rangeUnderflow

6、 rangeOverflow

目的:限制数值型控件的无比小值和极端充分价值。

就此法:为表单控件设置min/max特性,并授予允许的最为小值/最老价值。

示例:<input type=”range” name=”ageCheck” min=”18″ max=”80″ />

 

7、 stepMismatch

目的:确保输入值符合min、max及step即设置。

故而法:为表单控件设置step特性,指定数值的增量。

示例:<input type=”range” min=”0″ max=”100″ step=”5″>

 

 

8、 customError 

目的:开发人员的自定义错误信息,处理下代码明确设置与计算产生的错误。

于是法:调用setCustomValidity(message)将表单控件置于customError状态。

示例: 

<input type=”text” oninput=”checkNumuric(this)” />

Script: 

    function checkNumuric(input) { 

        var checkValue = input.value; 

        var reg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; 

        if (!reg.test(checkValue)) input.setCustomValidity(‘您要输入正确的网址!’); 

        else input.setCustomValidity(”);

    }

图片 10

 

//使用gets()

char buffer[4096];

gets(buffer);

//使用fgets()替换gets()

char buffer[4096]; 

fgets(buffer, (sizeof buffer / sizeof buffer[0]), stdin);

用户或开发人员提交页面的上,表单仍用于为服务器端发送表单中控件的值;

 参考网址:

Cancel VALIDATION(取消验证操作):

1、 form元素的 novalidate 属性,关闭表单验证,可以不同区域做此装置,来对一些提交的数码证明,某些不说明。

2、 input 元素的 formnovalidate属性,可以针对该因素启动或停验证

3、 sumbmit 元素的 formnovalidate属性,可以针对全体表单启动或终止验证,相当与form 元素的 novalidate属性

 

 

咱的离线系统面临生因此到面的均等片表单元素,如我辈的用户信管理表单:

图片 11图片 12View Code

 1 <div class="UserInfo" >
 2          
 3          <div class="UserInfoSingle"> 
 4          姓名: 
 5           <input id="UserName" name="UserName" type="text" placeholder="Your UserName" required="required" />  
 6          </div>
 7 
 8          <div class="UserInfoSingle"> 
 9          性别: 
10           
11            <select id="UserSex" name="UserSex" style="width:65px; " >
12                <option value="0" >男</option>
13                <option value="1" >女</option>
14             </select>
15           
16          </div>
17 
18          <div class="UserInfoSingle"> 
19          入职时间: 
20           <input class="calinput" id="ReportDutyTime" name="ReportDutyTime" readonly="readonly" onclick="return showCalendar('ReportDutyTime', 'y-mm-dd');" type="text" placeholder="Report Duty Time..." required="required" />  
21          </div>
22 
23          <div class="UserInfoSingle"> 
24          工号: 
25           <input type="text" id="JobNumber" name="JobNumber" placeholder="Your Job Number..." required="required" pattern="^[0-9]{7}"    title="工号必须为7位数字..." />  
26          </div>
27 
28          <div class="UserInfoSingle"> 
29          部门: 
30           <input type="text" id="DepartmentNumber" name="DepartmentNumber" placeholder="Your Department Number..." required="required" />  
31          </div>           
32          <input type="submit" value="保存" style="float:right;margin:10px 65px 0 0" />
33       </div>

页面效果如下:

图片 13

 

 本文源码:CRX_Mail_Form

经过Google查阅前辈的问答,原来是这么回事。

 

gets()这个函数只生一个参数,那就是是字符缓冲区的指针,并不曾点名该缓冲区的长度为不怕是深浅。当您输入一个良丰富深丰富的字符串的时,gets
()函数会拿每一个字符都存入到仓库(statck)中,因此当字符串很老之时段就是见面造成程序非常终止。前辈们受的提议是动fgets()函数替代gets()。

表单仍然使Form元素作为容器,我们好当中设置基本的交由性质;

可以就此剧本操作表单控件;