永发信息网

网页设计时怎样把用户名设为必填项

答案:2  悬赏:0  手机版
解决时间 2021-07-26 15:57
网页设计时怎样把用户名设为必填项
最佳答案

给你个全点的


在web开发中Form经常被用来收集用户的一些信息,由用户在Form中输入一些基本的必填信息,当然包括你可以填写或可以不填写的非必填信息。

许多web商务站点的Form中通常会包含许多冗长和繁杂的各种字段项(与特定信息相关的文本框,下拉选择菜单,单选、多选按钮等HTML标记元素),由用户来填写或选择,一个不愿看到的事实是:这将严重影响电子商务的销售量- 大多数用户不会填写这些杂乱无章的字段项,而选择离开。

如果由用户来控制显示或隐藏那些非必填的字段项,将是一个非常好的主意!

怎么做?非常简单 - 仅用少量的Javascript、DOM和CSS就能轻松完成。


n HTML标记

首先,我们设置一个基本的Form,HTML代码如下,在Form中包含了fieldsets,legends和labels及一些HTML标记。

<form id="example-form" method="post" action=""> <fieldset> <legend></legend><label></label> <input name="Input"> 更多... </fieldset> 更多... <input type="submit" name="Submit" value="Submit"> </form>


你将注意到每个字段项元素的后面都添加了<br/>标记,这里纯粹是为了页面布局,如果你不考虑布局效果可以把它删除。


n 绑定非必填字段项

需要被绑定的非必填字段项以及相关的label被放入div标记块中,并设置div的class属性名为“fm-optional”,代码如下:

<label for="label">First name</label> <input type="text" name="fm-forename" id="label">


现在,我们添加一个空段落放在Form上面,过一会它将成为显示/隐藏非必填字段项的一个开关:


n Form中CSS设定

下面的CSS设定将适用于所有必填字段项。(所有字段都被指定为必填,除非另外设定-见后文)

其中,input和select的外边线颜色被设为红色。

fieldset div { margin : 0;

padding : 0;


}


fieldset div input {


width: 200px;


border : 1px solid #900;


padding : 1px;


}


fieldset div select {


width: 200px;


border : 1px solid #900;


padding : 1px;


}


为了进一步告知用户哪些是必填的字段项,在CSS中为label标记添加一个before伪类,它不适用于IE,见下面的代码:


fieldset div label:before {


content: "* "; // 在label前加一个*号,表示是必填字段项


}


现在,我们设置非必选字段项的样式(还记得前面有关非必填字段项的设置吗?div的class属性值是fm-optional,且这个div中包含的是非必填字段项。),这里input的外边线表现为灰色:


fieldset div.fm-optional {


display : block;


}


fieldset div.fm-optional label:before {


content: ""; }


.fm-optional input { border : 1px solid #ccc; }


Form中所有样式设毕,当然,上面只是样式的一种方案,你可以自定义更贴切自已需要的。


n 添加事件

还记得吗?在开始时我们在Form上放置了一个id属性值为linkContainer的空段落。现在,我们要写一点Javascript并结合DOM对这个段落标记作一些操作,当html页面加载时,段落标记中生成一个超链接文本:

toggle.appendChild(document.createTextNode('要隐藏非必填字段项吗?'));

然后,当用户点击这个超链接文本后,会有一些文字上的变化:

this.firstChild.nodeValue = (linkText == '要隐藏非必填字段项吗?') ?'要显示非必填字段项吗?' : '要隐藏非必填字段项吗?';

最后,还要设置所有class属性值为fm-optional标记的样式:

if(tmp[i].className == 'fm-optional') { tmp[i].style.display = (tmp[i].style.display == 'none') ? 'block' : 'none'; }


n 小结

瞧!一个非常易于使用和理解(它甚至在JAWS上工作得非常好)的Form就做好了,用户只需要开关显示/隐藏非必填的字段,能够很快地在线处理那些必需填写的字段项。

全部回答

可以在提交前判断也可以在提交后判断

提交前判断,一般用JS

例子如填写的表单名为 form1,用户名输入框的ID为 username

<script LANGUAGE="javascript"> <!-- function checkspace(checkstr) { var str = ''; for(i = 0; i < checkstr.length; i++) { str = str + ' '; } return (str == checkstr); } function check() { if(checkspace(document.reviewform.content.value)) { document.form1.username.focus(); alert("请填写用户名!"); return false; } } //--> </script>

提交后判断

if request("name")="" and request("password")="" then

response.write "用户名或密码不能为空"

我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
王后雄的《教材完全学案》这本书怎么样?对于
关于小学考试的祝福语,老师对毕业小学生的祝
征好听的新歌
怎样才能让自己的另一半觉得幸福、快乐?
DNF中什么角色好玩为什么好玩介绍下!
2010年哪天结婚好?
怎样投诉邮局的工作人员
在千岛湖开水电材料店到哪进货比较便宜
Looking for a playmate whose native langua
有没有比较快的方法来记繁体字。
蒋介石是什么时候死的
(初中生必读)的读后感作文
你好朋友、诺基亚n78和n79那个好啊
女孩一般都会喜欢哪种类型的男孩
把好友删除了怎么还能去偷菜呢
推荐资讯
Queen Jewelry珠宝是真的还是假的
斗破苍穹txt的文本。有的发个。..
下一站幸福什么时候有08
语文问题,以忆江南或者蝶恋花为词格式,自己
诺基亚6303c怎么样?和5300比呢?评价下这部
大家帮我分析下他是真爱我吗?
工商投诉撤诉申请书,假冒商品罪事实不清撤诉
dayhnadlnput是什么意思
填表示看的词语 从门缝往屋里偷看( ) 盯着
三年级英语下册手抄报怎么做
因式分解1.-4(x-2y)的平方+9(x+y)的平方2.x的
电影一句顶一万句,什么叫一句顶一万句?
正方形一边上任一点到这个正方形两条对角线的
阴历怎么看 ?