表单的设计与使用

作者: 辽A丶孙悟空 | 来源:发表于2019-03-29 20:18 被阅读214次

表单的设计与使用
基于表单设计器和流程设计器开发
hc6（5-1~5-9）
HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
如何设计一个交互好转化率高的表单
表单标签
如何提升表单使用体验？
审批管理中的智能控件套件，在审批中起到关键作用
网页设计建议
迅捷文档App技术支持

一、表单域的原理

什么是表单

表单在网页中主要负责数据采集功能。
表单是人和电脑互相交流的通道，表单和现实世界中的表单非常相似。

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单区域代码

表单标签用于定义表单名字、提交数据的目的地及提交方式等信息。

<form>标签用于描述表单，它是双标签。如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试表单</title>
</head>
<body>

   <form name="form1" action="loginServlet" method="post">

   </form>

</body>
</html>

二、文本框

单行文本输入框

用<input>标签描述，它是一个单标签。

例如：
登录名：<input type="text" name="loginName">
结果：

name属性：指定输入框的名字，自行定义，用英文字母定义即可。

type属性：单行文本输入框的type固定为text。

三、密码框

密码输入框

用<input>标签描述，它是单标签。

例如：
密码：<input type="password" name="password">
结果：

name属性：指定输入框的名字，自行定义，用英文字母定义即可。

type属性：单行文本输入框的type固定为text。

四、单选框

单选框

单选框一次只能选择一个选项。

用<input>标签描述。

单选框使用时至少需要两个以上的input标签，并且他们name属性相同，其中每一个input构成一个选项。

用户提交出去的是VALUE里面的值，而不是页面上显示的文字。

例如：
性别：
           <input type="radio" name="sex" value="1"/>男
           <input type="radio" name="sex" value="2"/>女
           <input type="radio" name="sex" value="0"/>保密
结果：

五、复选框

复选框

name属性：指定复选框的名字，自行定义，用英文字母定义即可。

type属性：单选框的type固定为checkbox。

value属性：指定该选项的值。

checked属性：该属性固定值为checked，表示选中该选项。

例如：
爱好：
           <input type="checkbox" name="hobby" value="1"/>音乐
           <input type="checkbox" name="hobby" value="2"/>看书
           <input type="checkbox" name="hobby" value="3"/>运动
           <input type="checkbox" name="hobby" value="4"/>编程
结果：

六、下拉菜单

下拉单选框

下拉单选框一次能选择一个选项。

用<select>标签描述，每一个选项用子标签<option>描述。

提交的是VALUE值。

selected属性：该属性固定值为selected，表示选中该选项。

例如：
请选择省份：
                   <select>
                       <option value="0">==请选择==</option>
                       <option value="辽宁省" selected="selected">辽宁省</option>
                       <option value="吉林省">吉林省</option>
                       <option value="黑龙江省">黑龙江省</option>
                   </select>
结果：

七、多行文本

多行文本输入框

多行文本输入框用于输入大量的文字信息。用<textarea>标签描述，它是一个双标签。

name属性：指定输入框的名字，自行定义，用英文字母定义描述。

rows属性：指定文本框的行数。

cols属性：指定文本框的列数。

例如：
个人信息：
               <textarea name="info" rows="10" cols="10">

               </textarea>
结果：

八、上传

文件上传

文件上传标签。

<input type = "file" />用于文件上传。

例如：
上传头像：<input type="file">
结果：

九、按钮

普通按钮

页面上显示的普通按钮，默认没有功能。它用<input>标签描述，它是一个单标签。

name属性：指定按钮的名字，自行定义，用英文字母定义即可。

type属性：提交按钮此属性的固定值为button。

value属性：指定按钮上显示的文字。

例如：
<input type="button" value="普通按钮"/>
结果：

重置按钮

重置按钮用于清除表单中的所有数据。它用<input>标签描述，它是一个单标签。

name属性：指定按钮的名字，自行定义，用英文字母定义即可。

type属性：提交按钮此属性的固定值为reset。

value属性：指定按钮上显示的文字。

例如：
登录名：<input type="text" name="loginName">
   <input type="reset" value="重置按钮"/>
结果：

提交按钮

提交按钮用于将表单数据提交给action属性指定的地址进行处理。它用<input>标签描述，它是一个单标签。

name属性：指定按钮的名字，自行定义，用英文字母定义即可。

type属性：提交按钮此属性的固定值为submit。

value属性：指定按钮上显示的文字。

例如：
<form action="#" method="get" >
   登录名：<input type="text" name="loginName">
   <input type="submit" value="提交按钮"/>
</form>
结果：