精华内容
下载资源
问答
  • HTML表单设计应该注意什么

    千次阅读 2016-04-23 14:00:59
    今天看到一篇文章,是关于HTML表单设计问题的,于是我认真反思了一下,发现自己平时在设计页面表单时,也或多或少的存在这样的问题,所以就写出来和大家分享一下, 希望大家以后在设计表单的过程中尽可能的避免这些...

    今天看到一篇文章,是关于HTML表单设计问题的,于是我认真反思了一下,发现自己平时在设计页面表单时,也或多或少的存在这样的问题,所以就写出来和大家分享一下,

    希望大家以后在设计表单的过程中尽可能的避免这些问题,从而改善页面的用户体验...

    在网站中,表单是用户跟我们沟通的主要桥梁。透过表单,用户可以买东西、订阅新文章、更新资料……可以说网站最重要的功能,都是靠表单来完成。

    那么我们在设计表单的过程中存在哪些问题呢?我把它总结了一下:

    1、用户在填写表单时,尽可能的展示出表单的填写步骤,一共有几步。这样做能够让用户在填写表单的时候有一个心理的预期,估计出可能需要花费的时间,提升用户的体验感。而不是一页写完之后又是一页,用户根本不清楚到底需要填写多少。

    2、表单的字段验证要尽可能的详细,提示要尽可能的完整,用户在填写一个表单时,往往不能一步到位,出现违反验证规则的输入时,页面要响应出准确的错误信息,从而帮助用户进行改正,比如url地址必须以http开头等

    3、主要按钮和次要按钮要明确,次要按钮出现在页面是让用户在意识到自己有填写错误时,可以有一个返回的操作,并不是占主导地位的,所以应尽可能的凸显主要按钮

    4、清楚提示期望用户填写的格式和内容,这里也就是说label标签的使用和输入款提示内容的结合使用,比如label和placeholder的结合

    5、注意下拉菜单不能过长,像12306一样下拉菜单太长可以提供检索的功能,避免用户选择时出现视觉疲劳

    。。。。。

    还有很多需要注意的,这里就不赘述,有需要的朋友可以看看这篇文章http://www.devstore.cn/essay/essayInfo/6300.html?ref=myread,我觉得总结的蛮好的!!

    展开全文
  • 今天做了一下html表单设计,对表单的数据类型的限制做了一下搜集,希望对大家有帮助! 只能是中文  只能是英文和数字.屏蔽了输入法  只能输入英文和数字  只能是数字 只能显示,不...
    今天做了一下html表单的设计,对表单的数据类型的限制做了一下搜集,希望对大家有帮助!



    只能是中文<input οnkeyup="value=value.replace(/[ -~]/g,'')" οnkeydοwn="if(event.keyCode==13)event.keyCode=9"> 


    只能是英文和数字.屏蔽了输入法<input style="ime-mode:disabled" οnkeydοwn="if(event.keyCode==13)event.keyCode=9"> 


    只能输入英文和数字<input οnkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" οnkeydοwn="if(event.keyCode==13)event.keyCode=9"> 


    只能是数字<input οnkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">


    只能显示,不能修改的文本框<input readOnly value="只能显示,不能修改">
    展开全文
  • html表单标签与表单设计

    千次阅读 2020-04-17 17:09:57
    刚刚接触前端的HTML,练习并记录程序。 下面是对HTML表格的整理并总和在一起做的一个小练习。 IDE:VScode 主要框架是自动生成的,body内为自己编写内容。 <!DOCTYPE html> <html lang="en"> <head&...


    刚刚接触前端的HTML,练习并记录程序。
    下面是对HTML表格的整理并总和在一起做的一个小练习。
    IDE:VScode、hbuilder

    1.form标签及其属性

    HTML 表单用于向服务器传输数据。

    表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

    表单使用表单标签<form>和</form>来设置的。
    基本语法:

    <form name="表单名称" method="提交方法" action="处理程序">···</form>
    

    <form>标签还有有name、method、action、target等属性。
    其中:name 代表表单的名称。method 规定用于发送数据所使用的HTML方法(get、post)。action 为处理方法,一般填入URL。target 规定在何处打开URL(_blank、 _self、_parent、 _top、framename)。

    2.input标签及其属性

    格式:

    <input type="域类型" name="名称" value=""/>
    

    <input> 元素是最重要的表单元素
    <input> 元素有很多形态,根据不同的 type 属性可以做出以下分类:

    ①文本域:text

    格式:

    <input type="text" name="名称" maxlength="" size="" value=""/>
    

    maxlength属性用来定义此区域输入的最大字符数。例如当maxlength设置为5的时候,文本域内最多只能输入五个数。

    <form action="" method="post">
       文本域:<input type="text" name="名称" maxlength="5"/>
    </form>
    

    在这里插入图片描述
    size属性用来定于此区域显示的尺寸的大小。例如如下size分别为5和20的对比。

    size的默认宽度是 20 个字符。

    文本域:<input type="text" name="名称" size="5"/>
    文本域:<input type="text" name="名称" size="20"/>
    

    在这里插入图片描述
    value属性为输入框的值,可以不填,因为当用户在输入框输入值时,value会自动赋值为输入框的值。如果填写,则直接显示在输入框内。

    文本域:<input type="text" name="名称" value="我是一个文本域"/>
    

    在这里插入图片描述

    ②密码域:password

    格式:

    <input type="password" name="名称" maxlength="" size="" value=""/>
    

    当用户在密码域输入框内输入密码时。输入框区域会显示 “ * ”号代替用户输入的内容。
    在这里插入图片描述

    ③单选按钮:radio

    格式:

    <input type="radio" name="名称" value="" checked/>
    

    其中checked属性是用来设置该单选按钮默认状态是选中状态。

    当有多个互斥的单选按钮时,需要设置相同的name值。这样,每个时刻都只会有一个选项被选中。

    单选按钮1:<input type="radio" name="单选" value=""/><br/><br/>
    单选按钮2:<input type="radio" name="单选" value="" checked/><br/><br/>
    

    在这里插入图片描述
    单击按钮1:
    在这里插入图片描述

    ④复选按钮:checkbox

    格式:

    <input type="checkbox" name="名称" value="" checked/>
    

    因为复选按钮不需要互斥,所以name可以一样,也可以不一样。

    复选按钮:<input type="checkbox" name="复选1" value="" checked/><br/>
    复选按钮:<input type="checkbox" name="复选2" value="" checked/><br/>
    复选按钮:<input type="checkbox" name="复选2" value="" checked/><br/>
    复选按钮:<input type="checkbox" name="复选2" value=""/><br/>
    

    在这里插入图片描述

    ⑤提交按钮:submit

    格式:

    <input type="submit" name="" value="提交">
    

    能将表单提交给服务器的按钮,实现交互功能。

    ⑥取消按钮:reset

    格式:

    <input type="reset" name="" value="清空"><br/><br/>
    

    能将表单全部清空的按钮。

    填写了信息的表单:在这里插入图片描述点击取消按钮后:在这里插入图片描述回到了最初的默认状态。

    ⑦图像按钮:image

    格式:

    <input type="image" src="">
    

    同提交按钮功能一样,只是由图片代替了按钮,图片的源文件由src属性指定,同时也能设置图片的大小等属性值。

    图像按钮:<input type="image" src="miao.jpg" size="100" width="100"><br/><br/>
    

    在这里插入图片描述

    ⑧文件域:file

    格式:

    <input type="file" name="" size="" maxlength="">
    

    提供上传文件的功能。
    在这里插入图片描述
    在这里插入图片描述

    ⑨隐藏域:hidden

    格式:

    <input type="hidden" name="" value="">
    

    用户不能在其中输入信息,用来预设某些要传递的信息。

    3.下拉列表框:select 、option

    在表单中,可以通过<select>和<option>标签设计一个下拉式列表或带有滚动条的列表,用户可以再列表中选着一个或多个选项。

    基本语法:

    <select name="" size="" multiple>
        <option value="" selected="">选项一</option>
        <option value="">选项二</option>
        ```
    </select>
    

    语法说明:
    ①<select>标签下:

    • name:下拉列表的名称。
    • size:下拉列表框的大小,默认为1。
    • multiple:允许用户多选,如果缺省,则表示单选。

    ②<option>标签下:

    • value:用于选项被选中后提交给服务器的数据。
    • selected:设置默认状态为选中状态。
    <p>课程选择:
    <select name="" size="">
      <option value="" selected="">java web</option>
      <option value="">数据预处理</option>
      <option value="">数据挖掘</option>
      <option value="">信息安全技术</option>
      <option value="">马克思主义</option>
    </select>
    </p>
    

    在这里插入图片描述

    4.多行文本框:textarea

    基本语法:

    <textarea name="" rows="" cols="" wrap="">
      初始值
    </textarea>
    

    其中:rows为输入域的行数,cols为输入域的列数,warp用于是否自动换行(hard、soft)。

    <textarea rows="10" cols="30">
    我是一个文本框。
    </textarea>
    

    在这里插入图片描述

    综合练习:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>html表单练习</title>
    </head>
    
    <body>
        <form action="" method="get">
            邮箱地址:<input type="text" placeholder="请输入邮箱地址" />@
            <select name="email">
                <option value="qq">qq.com</option>
                <option value="wangyi">163.com</option>
                <option value="google">gmail.com</option>
            </select>
            <br /><br />
    
            密码:<input type="password" />
            <br /><br />
    
            性别:<input type="radio" name="gender" checked /><input type="radio" name="gender" /><br /><br />
    
            验证码:<input type="text" />
            <img src="img/yanzhengma" width="100" height="50" title="这是验证码" />
            <br /><br />
    
            <!--<input type="button" value=""/>-->
            <button>更换验证码</button>
    
            <br /><br />
            备注:<textarea name="" id="" cols="30" rows="10"></textarea>
    
            <br /><br />
            <input type="checkbox" />同意<a href="text/hi.html">"隐私条款"</a>和"隐私权相关政策"
            <br /><br />
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form>
    </body>
    
    </html>
    

    总结:
    1. 标签用于为用户输入创建 HTML 表单。
    ① 标签的 action 属性规定当提交表单时,向何处发送表单数据。
    ② 标签的 method 属性规定如何发送表单数据。主要有get和post两种。其中get方法就是直接填充到URL上,post方法是先与action属性指定的表单建立联系,然后把数据分段传输到服务器。
    在这里插入图片描述

    展开全文
  • HTML5表单设计

    千次阅读 2012-05-25 11:02:23
    在这个离线系统中,表单无疑是构成这个离线系统的视图部分,作为最前端,与客户的操作最密切相关的一块,所以我们有必要先了解一下HTML5的Forms API,它有如下特性:  表单仍然使用Form元素作为容器,我们可以...

    在这个离线系统中,表单无疑是构成这个离线系统的视图部分,作为最前端,与客户的操作最密切相关的一块,所以我们有必要先了解一下HTML5Forms API,它有如下特性: 

    表单仍然使用Form元素作为容器,我们可以在其中设置基本的提交性质;

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

    沿用之前的表单控件及其使用方法,并不断发展和增加新的控件和功能;

    可以用脚本操作表单控件;

     

    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>

     

    滑动条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" οnchange="changeRange(this.value)"/> 

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

    <span>请在新版OperaChromeSafari中查看</span>

    </p>   

    function changeRange(rangeVal) {

                $("#ShowRange").html(rangeVal+"%");

     }

     

     

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

    Placeholder:(placeholder指的是默认的文字,当用户没有输入值的时候,输入型控件可以通过placeholder进行描述性说明或提示,当焦点聚焦或者输入文本的时候,placeholder会消失): 

    <input type="text" placeholder="对文本框的描述…" />

      

    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文本框要求必须输入的是正确的邮箱地址,否则的会有错误提示

     

    URL文本框:

    <p>

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

    <input type="url" id="url" autocomplete="off" placeholder="请输入正确URL地址autofocus="autofocus">

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

    </p>

    URL文本框要求必须输入的是邮箱地址,否则的会有错误提示: 

     

    Search搜索框:

    带有搜索框样式的input控件,

    <p>

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

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

    <span>请在新版Chrome中查看</span>

    </p> 

     

    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" />

     

     

    2、 typeMismatch

    目的:确保控件内的值与控件的类型相同(如numberemailurl

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

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

     

    3、 patternMismatch

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

    用法:在表单控件上设置pattern特性,井赋予适当的匹配规则title是你要反馈给用户的自定义错误信息

    示例:<input type=”text” title = "请填写数值,可以包含1-4位的小数", placeholder = "请填写数值...", pattern = "^[0-9]+(.[0-9]{1,4})?$"/>

     

    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

    目的:确保输入值符合minmaxstep即设置。

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

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

     

     

    8、 customError 

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

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

    示例: 

    <input type="text" οninput="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('');

        }

     

    Cancel VALIDATION(取消验证操作):

    1、 form元素的 novalidate 属性,关闭表单验证,可以不同区域做这个设置,来对某些提交的数据验证,某些不验证。

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

    3、 sumbmit 元素的 formnovalidate属性,可以对整个表单启动或停止验证,相当与form 元素的 novalidate属性

     

     

    我们的离线系统中有用到上面的一部分表单元素,如我们的用户信管理表单:

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

    页面效果如下:

    展开全文
  • 这篇在前面一篇文章基础上,在表单页面增加了一部分功能,有复选框和文本框,还有文件选择和提交按钮。为了尽可能的模拟,我们平时在网页上注册的场景,我们来设计一个如下图的页面。... HTML 表单1
  • 2.1.4 表单设计案例——学生入校注册页面设计  【例2-6】设计一个学生信息注册网页 【分析】该页面采用表单的方式设计,为了页面各元素整齐,采用表格的方式控制元素的位置。 【实现代码】  学生信息注册页面   ...
  • 表单设计】优秀表单设计案例

    千次阅读 2015-07-29 10:05:56
    表单设计二三事-20150725早读课 时间: 2015-07-25 / 编辑:早读课 / 分类:交互体验,产品设计 / 451 人看过 / 暂无评论 发表评论 来源:24Says 微信ID:iiiv-says 更多详情请联系 @UEDetail 在这个被...
  • HTML 表单制作

    万次阅读 多人点赞 2019-09-19 20:36:11
    HTML 表单 用于收集不同类型的用户输入。 表单是一个包含表单元素的区域 表单元素是允许用户在表单中输入内容, 比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等 表单使用...
  • flowable表单设计器选型

    千次阅读 2020-02-25 16:45:33
    用flowable实现工作流不可避免有表单的需求,讲一下flowable表单设计器的选择。 flowable有自带的表单设计器,这个结合业务需求看是否合适。 网上也有很多开源的设计器,如果用开源的表单设计器,大概的方案...
  • HTML5表单技术 调查问卷设计

    千次阅读 2020-06-01 14:29:58
    css部分: HTML部分: 效果:
  • vue element web 表单设计工具

    万次阅读 2020-12-07 22:22:17
      项目名 dw-form-making,基于 element-ui 组件库的Web端表单设计工具。   项目技术栈vue、vue-cli3,可视化设计element-ui输入框、选择器、单选框等控件组成的Form表单,配置表单字段、标签、校验规则等。  ...
  • HTML 表单按钮

    万次阅读 2018-04-13 20:11:53
    表单按钮表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍...
  • HTML网页设计基础笔记 • 【第3章 表单

    万次阅读 多人点赞 2020-03-21 10:03:12
    3.1 表单 3.1.1 表单概述 在遨游网络世界时,我们除了浏览网页信息,有时还需要将一些数据输入到网页中,经过网页提交至服务器。例如,我们登录邮箱时,需要输入用户名和密码。注册网站的用户时需要输入用户的信息...
  • html5网页设计-表单

    千次阅读 2019-09-23 17:21:53
  • 流程表单开发设计设计方案

    千次阅读 2015-05-10 10:42:29
    基于文档型数据库表单设计器设计方案,界面基于响应式界面设计框架。
  • 使用H5设计表单

    千次阅读 2015-12-16 10:41:10
    强大的HTML5,极大地增强了表单设计能力,实现了很多以前需要大量编码才能实现的功能。下面我们一起来看看吧。 l 传统表单元素 action属性,给出绝对地址,可以指向任何服务器 method属性,查询建议用get方式...
  • 开源表单设计

    万次阅读 2017-05-10 14:28:13
    推荐几款开源的表单设计器给大家 http://www.html580.com/10243   http://www.html580.com/11551   http://www.html580.com/12269 http://www.html580.com/11788
  • 6款优秀的在线表单设计

    万次阅读 2019-04-12 10:36:26
    JotForm 在线表单设计器 JotForm 易于使用的在线表单设计器,为企业业务数据设计表单和收集数据,例如可设计一些订单信息表、客户信息表等, 是所见所得的 在线定义表单,界面操作比较简单,拖动HTML元素组件...
  • HTML5 原质化设计表单简单实例学习

    千次阅读 2014-12-10 21:08:55
    我们结合实例来感受和学习Material Design设计规范。本例包含的原质化设计元素有如下几个:1. 文本输入框用户未输入时,文本输入框的位置显示为Label(而不是通常的空白输入框+左侧Label),用户点击Label后,Label...
  • 表单页面设计

    千次阅读 2017-01-24 20:49:20
    用户填入表单的信息总是需要程序设计进行处理,表单中的action就指明了处理表单信息的文件,这个值可以是 程序或脚本的一个完整URL 2:method 用来定义处理程序从表单获得信息的方式, get----来访者输入的数据会...
  • 五、HTML-表单页面设计之陕西理工大学教务系统 目标页面 代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单页面2表格实现</title> </head>...
  • 表单设计以及优化Tips的总结

    千次阅读 2016-10-18 18:08:21
    然而,这么多年伴随着一些改进我们发现,表单设计在我们的使用感受中也仅仅停留在“还可以”的程度。不过,现在我们可以使用新的方法设计出更好、更便捷的表单体验。 那么,首先来说明一下表单所
  • 垂直布局的HTML表单

    千次阅读 2018-02-23 22:01:51
    垂直布局的表单对于比较复杂的表单,要填写的内容相对较多,采用水平布局显然不合适。因此,垂直布局的表单更加常用。垂直对齐的表单中,标签和输入框可以使用三种对齐方式,包括顶对齐、左对齐和右对齐。CSS 顶对齐...
  • 在线表单设计器设计原理

    千次阅读 2012-10-26 17:17:53
    表单设计器设计思路 1.页面布局 分为3个部分(设计器图片已上传) (1)组件,用来画表单的基础工具,可以用Ext的tree实现。 (2)设计区域,就是一个配上背景图片的div。 (3)右侧属性栏,每个组件都有...
  • HTML表单

    千次阅读 2018-02-19 11:31:57
    一、 form标签两个最重要的属性:action 和 method input的type类型有很多,这里有text和password两种 button的type类型默认为submit,另外还有button, reset类型 ============================...二十一、表单设计原则
  • html表单数据传递 介绍 在某些时候,所有Web开发人员都需要从用户那里收集数据。 在动态网页中,一切都围绕用户的输入,因此了解如何请求和收集此数据对于任何开发人员都是至关重要的。 本文是有关如何使用HTML...
  • 网页中的表单设计

    千次阅读 2019-03-18 21:14:15
    在学习了最基本的网页元素后,接触到了表单,下面是用HTML写的很基础的表单,中间设计到了一点点CSS的内容,不算复杂。 <!doctype html> <html> <head> <meta charset="utf-8"> <title...
  • 表单设计工具和报表工具

    千次阅读 2013-06-18 17:28:03
    收集了一些资料: 1 、IBM发布开源HTML 5可视化设计工具Maqetta 4月12日,来自 IBM Impact 2011 的消息,IBM发布 Maqetta,一个创建桌面...2、JotForm - 方便好用的在线Web表单设计工具  http://www.jotform.com/

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 150,729
精华内容 60,291
关键字:

html表单设计