整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端入门-html 表单控件使用

篇介绍了表单的使用,表单有很多控件,比如输入框,密码框、文本域,按钮等。按类型可分如下:

  • 输入类控件
  • 菜单类控件

输入类组件 —— input

此类控件有很多种类型,使用<input type="类型">语法,常见类型如下:

type 值

含义

text

文字字段

password

密码域,用户看不到明文,以*代替

radio

单选按钮

checkbox

多选按钮

button

普通按钮

submit

提交按钮

reset

重置按钮

image

图像域,用图像作为背景的提交按钮

hidden

隐藏域,不可见的输入框

file

文本域,用于上传文件等非文本数据

文本输入框和密码框

除了显示形式不一样,其它属性一样,有以下属性:

  • name —— 定义文字字段名称,用于和其它控件区别,不能包含特殊字符,也不可使用html 标签名称
  • maxlength —— 定义文本框可输入字符最大长度
  • size —— 定义文本框在页面中显示的长度
  • vaule —— 定义文本框中默认的值

如下是文本输入框和密码框制作一个登录表单

html代码:

<!DOCTYPE html>
<html>
<body>
<h1>用户登录</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用户名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密码:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

显示效果:

HTML5 输入类型

除了以上几种类型,HTML5 还增加了多个新的输入类型:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

如下代码:

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  数字类型(1 到 5 之间):
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 选择颜色:
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月:
  <input type="month" name="bdaymonth"><br>
  年周:
  <input type="week" name="week_year"><br>
  时间:
  <input type="time" name="usr_time"><br>
  一定范围
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能够在被提交时自动对电子邮件地址进行验证<br>
  搜索:
  <input type="search" name="googlesearch"><br>
  电话:
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 类型。<br>
  url:
  <input type="url" name="url">
  提交时能够自动验证 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下:

单选和多选按钮

使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选,除了name和value属性外,单选和多选都有一个 checked属性定义默认选择的项,checked = “true”指选中那个选项,表单会将 checked = “true” 的选型值传递给后台。

如下实例:

<!DOCTYPE html>
<html>
<body>
<h4>单选和多选</h4>
<form action="/demo/demo_form.asp">
水果:
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 苹果
<br><br>
省份:
<input type="checkbox" name="shengfen" value="shannxi" checked> 陕西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 广东
<br><br>
<input type="submit">
</form> 
</body>
</html>

显示效果:

单选和多选传递给后台的数据是不一样的,如下会看到地址栏中的数据,多选会发送多个值,后台将会获取一个数组形式的数据。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按钮、提交按钮、重置按钮

普通按钮:type = “button”,一般配合脚本使用,语法如下:

<input type="button" name="名称" value="按钮值" onclick="脚本程序" />

value 值就是按钮在页面显示的文字,onclick属性定义了脚本事件,这里指单击按钮时所进行的处理。

如下示例:

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按钮">
<input type="button" value="打开窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

单击您好按钮

提交按钮:type = “submit”,用于提交表单内容,是一种特殊按钮。

如刚才的登录表单,提交后会返回结果:

重置按钮:type="reset",用于清除表单数据,也是一种特殊按钮。

输入数据

点击重置按钮后,表单数据清空

重置清空数据

HTML5 按钮

除了使用input定义按钮,还可以使用 html5 新增的<button> 标签定义按钮,button 使用语法如下:

<form action="/demo/html/action_page.php">
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
</form> 

其它输入类控件

隐藏域 —— hidden
文件域 —— file

如下示例:

<form action="/demo/html/action_page.php">
  <label for="fname">隐藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form> 

显示效果

可以看到,隐藏域在页面中不显示,单击文件域选择文件按钮可以选择文件,比如word文件,电子表格文件等,会以非文本方式传送到后台的,常用来实现文件上传功能。

文本域 —— textarea

除了input 类型的控件,还有文本域 textarea ,一种特殊的文本框,它与input 文本输入框的区别就是可以输入多行文字,input 文本输入框是单行的无法输入多行文字。

如下示例:

<p>textarea 元素定义多行输入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下:

rows 属性定义文本域的高度是几行,cols 定义文本域宽度占几列,比如上面定义了高10行宽30列的文本域。

下拉菜单和多选列表

下拉菜单作用和单选按钮类似,只不过它更加节省空间,当要选择的选型很多时,就不适合使用radio空间,所以当选项很多的时候,使用下拉菜单,语法如下:

<select name="名称">
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选列表和多选按钮类似,一样为了节省空间,当数据选项比较多时,使用多选列表,语法如下:

<select name="名称" size="可看见的列表项数" multiple>
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选比下拉菜单不同之处是多了一个multiple属性,定义多选的,且表现形式也不一样,不是下拉而是一个列表。

如下代码:

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜单:<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多选列表:<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

显示效果:

这里需要注意的是,多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选,效果如下:

到这里,已介绍了大部分的表单控件,现在你可以使用他们制作自己的表单,表单通常在动态网站中使用,这为以后制作动态网站打下基础。

还有许多属性没有讲到,比如html5新增的一些属性和功能,可自行参考 w3cshool 等网站学习,感谢关注,学习愉快!

上篇 : 前端入门——html 表单

下篇: 前端入门 —— 网页中使用窗口框架

备工作

本教程己经到了 Excel 示例的收尾阶段,掌握前期的内容,基本上可以完成一个 Excel Web add-in 插件了,但如果能够引入一些常用的控件库,能达到事半功倍的效果。这次我们将介绍一个可能会常用的控件库,颜色选择器,用于非常开发的功能。

使用颜色选择器突出显示单元格,可以采用一些现成的库,比如颜色选择器,使用Spectrum库(http://bgrins.github.io/spectrum/)来呈现颜色,用于选择单元格颜色。需要在 Libraries 中加入以下引用:

spectrum-colorpicker@1.8.0/spectrum.jsspectrum-colorpicker@1.8.0/spectrum.css

效果如下:

代码

【取色】

核心代码为:

$("#colorpicker").spectrum("get").toHexString;

$("#colorpicker").spectrum
(
 { 
 color: "#f00"
 }
);

$("#run").click(run);

async function run 
{ 
 try 
 { 
 await Excel.run(async (context) => { 
 const range = context.workbook.getSelectedRange; 
 range.format.fill.color = $("#colorpicker") .spectrum("get") .toHexString;
 range.load("address"); 

 await context.sync; 
 console.log(`The range address was "${range.address}".`);
 }); 
 }
 catch (error) 
 { 
 OfficeHelpers.UI.notify(error); 
 OfficeHelpers.Utilities.log(error); 
 }
}

目录索引

  • Script Lab 01:快速 Office 365 开发工具
  • Script Lab 02:Script Lab,知识储备
  • Script Lab 03:Script Lab,启动函数,Excel 基础操作(1)
  • Script Lab 04:Script Lab,九九乘法表,Excel 基础操作(2)
  • Script Lab 05:Office JavaScript API助手,Excel 基础操作(3)
  • Script Lab 06:事件处理,Excel 基础操作(4)
  • Script Lab 07:引入控件,Excel 基础操作(5)
  • Script Lab 08:单词“卡拉OK”,Word 基础操作
  • Script Lab 09:异步调用函数,PowerPoint 基础操作
  • Script Lab 10:为 Officejs 开发配置 VSCode 环境
  • Script Lab 11:OIfficeJS 的三种调试方式

此文为大家整理出几款非常好用的JavaScript 表格控件分享给大家,希望对大家有所帮助!

1.Handsontable(用纯JavaScript,也可与 AngularJS指令 和聚合物组成。)

2.JsGrid(基于jQuery的轻量级客户端数据网格控件。它支持基本的网格操作,如插入、过滤、编辑、删除、分页和排序。jsgrid是灵活的,允许自定义其外观和部件。)

3.FancyGrid(一个插件的免费图书馆,它没有依赖但jQuery和AngularJS集成。fancygrid还包括样品数量、专业支持、优雅的API,当然详细的文件,方便使用。)

4.jqGrid(是一个支持Ajax的JavaScript控件,它提供了在Web上表示和操作表格数据的解决方案。)

5.W2ui(图书馆一体化解决方案。它包含所有最常见的UI小部件:布局、网格、边栏、制表符、工具栏、弹出框、字段控件和窗体。你不需要拼凑一个不匹配的插件来完成你的目标。)

6.dhtmlxGrid(一个功能全面的JavaScript网格控件,它提供了尖端的功能、强大的数据绑定和大数据集的快速性能。丰富而直观的JavaScript API使网格具有高度的可定制性和易用性。)

7.jQWidgets(是一个专业的触摸功能完整的框架使jQuery插件、主题、输入验证、拖放插件,数据适配器,内置WAI-ARIA可达性、国际化和MVVM支持。)

切版 qieban(.cn)