⑴ html—为文本框设置必填属性
在input标签内添加required属性竖慧
即必须在填写该文本余如答框之橡消后，才可以提交表单
⑵ 表单设置必填项和选填项
<formid="form">
<inputname="user"message="账号"value=""/>
<inputname="name"value=""/>
<inputtype="button"onClick="checkStart()"value="save"/>
</form>
<script>
functioncheckStart(){
check(form);
}
functioncheck(form){
for(i=0;i<form.length;i++){
varele=form.elements[i];
varmsg=ele.getAttribute('message');
if(msg&&ele.value==""){
alert(msg+"不能为空!");
槐升喊form.elements[i].focus();
returnfalse;
}
}
form.submit();
}
我不知笑渣道你具体代码 就是给的一个思路 在需要验证的input 或者select 添加一个message的属性
验证的时候 检查有属性就判断是否为空 提铅野示用message的汉字 一般的name也是字母 提示别人看不懂
⑶ 如何在html网页中设置文本框为必填并且只能填10个字符
<SCRIPTLANGUAGE=JavaScript<!--//functiontextCounter(field,countfield,maxlimit){//定义函数，传入3个参数，分别为表单区的名字，表单域元素名，字符限制；if(field.value.lengthmaxlimit)/肢基/如果元素区字符数大于最大字符数，按照最简饥弯大字符数截断；field.value=field.value.substring(0,maxlimit);else//在记数区文本框内显示剩余的字符数；countfield.value=maxlimit-field.value.length;}//--</拦闷SCRIPT<formname=myformaction=<textareaname=messagewrap=physicalcols=28rows=4onKeyDown=textCounter(this.form.message,this.form.remLen,5);onKeyUp=textCounter(this.form.message,this.form.remLen,5);</textarea尚能输入<inputreadonlytype=textname=remLensize=4maxlength=3value=5个字符</div</form给你段代码自己看看吧
⑷ 如何将表单内容设置为必填
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table width="500" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#CCCCCC">
<form name="form" method="post" >
<tr bgcolor="#f9f9f9">
<td width="13%"弊庆 height="20" > <div align="right">姓名：</div></td>
<td width="53%" height="20"> <input type="text" name="name" id="name" class="write" size="20" maxLength=8>
*8个字内</td>
<script>
function showimage(){document.images.showimages.src="<%=imdeximg%>"+document.form.sex.options[document.form.sex.selectedIndex].value+""+document.form.img.options[document.form.img.selectedIndex].value+".gif";}
</script>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right"> 性别： </td>
<td height="20"> <select name="sex" size="1" onChange="showimage()">
<option value="1">男</option>
<option value="0">女</option>
</select> </td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">QQ：</td>
<td height="20"> <input name="qq" type="text" id="qq" size="35" maxLength=15 class="write">
*</td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="指卜腊20" align="right">主页： </td>
<td height="20"> <input name="web" type="text" value="http://" size="35" maxLength=50 class="write">
</td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">来自：</td>
<td height="20"> <input name="come" type="text" id="come" size="35" class="write"></td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">电子邮箱：</td>
<td height="20"><input name="email" type="text" value="" size="35" maxlength=50 class="write">
*</td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">主题：</td>
<td height="20">
<唯滑input name="title" type="text" class="write" id="title" size="35" maxLength=10>
*
</td>
</tr>
<tr bgcolor="#f9f9f9">
<td align="right" valign="top"> 留言内容： </td>
<td> <textarea name="words" cols="50" rows="8" class="input1" id="words"
onKeyDown=gbcount(this.form.words,this.form.total,this.form.used,this.form.remain);
onKeyUp=gbcount(this.form.words,this.form.total,this.form.used,this.form.remain);></textarea>
* </td>
</tr>
<tr bgcolor="#f9f9f9">
<td align="right" valign="top" height="30"> </td>
<td height="30">最多字数： <INPUT disabled maxLength=4 name=total size=3 value=<%=txt%>>
已用字数：
<INPUT disabled maxLength=4 name=used size=3 value=0>
剩余字数：
<INPUT disabled maxLength=4 name=remain size=3 value=<%=txt%>></td>
</tr>
<tr align="center" bgcolor="#EAEAEA">
<td height="20" colspan="2"> <input name='validatecode' type='text' size='5'> <img
src='/validatecode.asp' align='absmiddle' border='0'><br>
<br>
<input type="hidden" name="action_e" value="Add_New">
<input type="button" onclick="DoSave();" name="Submit" value=" 提 交 " class="input1"> <input type="reset" name="Submit2" value=" 重 写 " class="input1">
</td></tr>
</form>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkForm(){
var name = document.getElementById('name');
if(name.value == ''){
alert("姓名不能为空");
return false;
}
return true;
}
function DoSave(){
if(checkForm()){
document.form.action = "<%=indexfilename%>";
document.form.submit();
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
给你写了一个,就是姓名不能空,如果其它的也要做这个判断的话,你再把其它的都加上,如果不清楚,用网络hi我
⑸ 关于Web表单设计的经验分享
表单在UI设计中的出现场景还是比较多的，尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计，就想把自己学到的一些关于表单设计的知识点分享给大家～
一、什么是表单？
表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。
二、表单的构成
表单通常由标签、输入域、操作按钮、这三部分构成。
标签
标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况：
1.当标签与输入域居中对齐时，建议把＊号放在标签左侧。
因为＊号比较显目，用户往往第一眼会先看到它，然后按照用户从左往右的阅读习惯，视觉落点分别为文字标签、输入域。考虑到表单的填写效率，＊号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时，把＊号放在标签左侧会更好。
2.当标签与输入域左对齐时，建议把＊号放在标签右侧。
由于人们纵向的阅读习惯，视线会成F型。＊号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰，另外考虑到对齐的形式，＊号放在标签右侧会更好。
输入域
输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。
不知道这些输入域的区别的小伙伴可以去ant design官网学习一下，传送门：
https://ant.design/components/overview-cn/
因为输入域是录入信息很重要的交互区域，在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中：我们要考虑光标的设计、输入文字信息的设计，信息提示等，在输入后：我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致，越能提高信息录入的成功率。
操作按钮
操作按钮是在用户填写完表单各项内容后，所要进行的操作动作，来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单，比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用，比如编辑、删除操作。
三、表单设计常见问题
1.标签采用哪种对齐方式更好？
在我们的实际项目中，通常会因为文案的长短不一，导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐，采用哪种对齐方式应考虑具体的制约因素和目标来定。
左对齐
当标签采用左对齐的方式的时，因为文字标签的长度不统一，导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强，以及横向空间的浪费。
如果采用左对齐的形式，就要尽量去保持文字标签的长度一致，比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间，这样设计上会更统一。以为例，采取左对齐形式，但是它留足了文字标签与输入域之间的距离，让表单看上去更统一和谐，不足的就是造成了部分空间的浪费。
顶对齐
采用顶对齐的形式，会让标签和输入域垂直显示，纵向布局的信息呈现效果会更好，从而提高用户填写的效率。顶对齐因为垂直排布，会造成纵向空间的浪费，但在横空间上比较节省，比较适用于横向宽度较窄的页面。
▵顶对齐
右对齐
右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强，以及横向空间的浪费，但节约了纵向空间。
▵右对齐
在这几种对齐方式中，用户浏览信息的速率顶对齐>右对齐>左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。
2.操作按钮应该用哪种设计形式比较好？
对于全局的操作按钮会用常规的按钮样式，全局按钮分为主按钮与次按钮。
主按钮
主按钮是界面中比较重要的功能操作按钮，比如提交、保存等一些正向的操作。主按钮在视觉层级上最高，能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意，也帮助用户理解该按钮的操作含义。
次按钮
次按钮的层级相对于主按钮层级要弱一些，通常采用线性形式。在一个页面中可以出现多个次按钮。
对于局部操作按钮的设计形式可以是文字按钮、图标按钮，也可以是图标＋文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。
图标按钮
图标按钮就是用图标来代表该操作的含义，能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计，也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例，当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释，让用户理解此按钮的意义，让用户放心操作。
在web设计中，由于按钮的种类与使用场景比较多，建议局部的操作按钮使用线性图标，让它的层级相对其他按钮要弱化一些。
文字按钮
文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色，因为蓝色在用户的认知中通常是可点击的。
图标＋文字 按钮
图文结合的按钮相对于纯文字按钮会更加直观，也能更吸引用户注意。
3.输入框应该设计几种状态？
考虑的状态越多，设计就会越细，能够及时的反馈信息给用户，从而提高表单填写效率。在考虑输入框的设计状态时，遵循及时反馈的设计原则去考虑。
为了避免用户填写完所有信息后，才反馈有错误，会造成时间浪费，表单填写效率低。通常会把输入框线变成红色，同时出现红色的说明文案，来引起用户的注意。
▵及时反馈错误信息
在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。
输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑，对于简单的表单设计过于细化的状态是没有必要的。
写在最后的话
表单设计看起来简单，但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中，觉得作为设计师我们不应该去挑活，不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计，我们在前期开始设计之前可以从交互层去考虑，再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时，我们可以去留意他们的设计细节，比如表单上下之间的间距留的是多少？有什么规律吗？按钮的上下边距与左右边距有什么关系吗？通过这些思考，然后去观察总结，并转化为自己的小技巧，到下一次设计表单的时候，我们就会做得很好了。
往期解析
UI设计－首页解析
详情页设计技法解析
轻松get文字标签设计技法
Get点9切图方法（内附切图神器）
⑹ web表单有哪些基本属性
web表单有哪些基本属性：1、数据填报，可作为独立的功能模块，用于管理业务流程、汇总采集数据，以及开发各类数据报送系统，因此，对于报表工具而言，其典型场景之一就是利用报表模板填报录入各种业务数据。
2、通过嵌入 SpreadJS 纯前端表格控件，企业可有效应对数据填报的各类技术难点，迅速搭建出具备 Excel 填报模式、公式函数、权限控制和数据校验的在线填报系统，因此业务人员无需专门培训，即可上手使用。
⑺ html添加了哪些表单元素和属性
html5 新增了的表单元素和属性如下：
属性：
1、 form属性
在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可。
2、 formaction属性
HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址
3、formmethod属性
既然对提交按钮有了formaction属性，就相应的有了formmethod属性
4、 placeholder属性
给文本框(text或textarea)处于未输入状态时的一种文字提示
5、autofocus属性
自动获得焦点，一个页面只能有一个控件具有该属性
6、 list属性
HTML5为单行文本框增加了一个list属性，没吵首该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该蒜素的浏览器出现错误，我们通常使用CSS设置不显示
6、autocomplete属枯数性
自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。
元素：
HTML5大幅度地增加和改良了input元素的种类
search 与text文本框类似，用于搜索；
tel 与text文本框类似，用于电话；
url 与text文本框类似，用于url格式的地址；
email 与text文本框类似，用于email格式的地址；
number 与text文本框类似，用于数值；
range 只允许输入一段范围内的数值，通过min和max属性来设置范围；
color 颜色文本框，“#000000”格式的文字；
file 文件选择文本框，HTML5中通过multiple属性可以多选；
datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；
output 定义不碰正同类型的输出；
表单验证
自动验证
所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
1、 required属性
具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示
2、pattern属性
具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示
3、min属性和max属性
它们是值类型和日期类型的input元素专用属性，限制了输入的范围
4、 step属性
控制元素的值增加或减少的步幅，如输入11-100之间的数字，且步幅是5，那么只能输入11、16、21....
显示验证
除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果。
取消验证
取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate：
自定义错误
在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息
增强的页面元素
1、figure元素
figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption
2、details元素
details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法
3 、mark元素
mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果
4、progress元素
可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。
5、 meter元素
定义度量衡
6、改良的ol列表
在HTML5中为ol元素添加了start属性和reversed属性
7、改良的dl列表
dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn
8、 另外还有cite用于表示作者，small用于标识“小型文本”等