前端入门-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 表单

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

页编程之图片、隐藏。

同学们好，这里是免费少儿编程知识分享，每天一行代码谁都能学会。今天分享的知识是为网页添加图片控件和隐藏控件，用到的是input标签的type属性值，image和hidden。这两个控件太过于简单，所以我就放在一起讲了，同时介绍了image控件button的image内容，以及IMG控件之间的区别。演示了hidden控件在实际编程中的作用。

先来看看今天实例的运行效果。网页上分为两段。

·第一段中有三张图片，第一张就是type属性等于image的效果，第二张是button中包含IMG标签的效果，第三张是纯IMG标签的效果。这三张图片的共同点是图片完全一致。不同点是type=image，直接将整张图片做成了提交按钮，点击之后即可提交整张表单，但外观表现时仍然和普通的图片是没有任何差别的。

·第二张是button按钮中使用了IMG标签，虽然它也有提交和图片，但是它最外面仍然保留了按钮的外边框，看上去是以按钮为主。

·第三章中直接使用IMG标签，它没有提交功能就是一普通的图片，但是我们仍然可以通过JS的submit函数来使其提交表单。

·第二段是一个密码框一个提交按钮。这一句话只是为了方便你们找到隐藏空间的位置，我还做了两个hidden的隐藏控件，但是你们看不到，我随便在这里输入密码，然后点击按钮时，JS就会取出(密码)控件的值和隐藏控件中的值并且弹出对话框提示。

这里有两点需要注意，可以看到密码控件中的值在这里仍然是明文显示的，证明它只是视觉上是*或者圆点，实际在数据传输中仍然是明文并没有加密。

·第二点是隐藏控件中的值被成功读取，看不到并不代表不存在，效果各位同学都已经看到了。

在我们来看看实现的代码，先讲image值，它的关键属性就是src和ID，也就是引用地址和命名，没有什么好讲的。我其实是不建议你们使用这个控件的，因为一般表单提交前，都会加上一层一层的验证，比如说是必填、b7手势、数字、格式是否正确。这个时候除了最基础的控件类型验证外还会用到 gs验证。而如果使用 gs验证就需要用到自定义函数，在提交到服务器前就验证好。

如果用户数据是正确的就提交，如果不正确就终止提交操作提示用户修改流程，这样看上去没有问题，但因image控件讨厌也就讨厌在这里。

·若用这种方式提交可能会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常，所以尽量不用或者少用。

·至于hidden控件常用来保存一些不需要或者不希望展示给用户的数据，他的常用属性就是无这个Value和这个id。

我举个例子帮助你们理解，现在客户要求建立一个注册新用户的界面，但是要求将注册步骤分为两步。第一步，需要用户填写手机和昵称，然后跳转至第二页，输入密码和其他的信息，第二页肯定就不需要显示出来用户在第一页的时候输入的数据了。但这些数据又必须在第二页的时候一起提交至服务器。

这时候就可以使用到隐藏控件--接收第一页提交过来的数据并且不显示，用户也感受不到。直接填好信息提交时第一页的数据也以隐藏空间的方式一起提交了。这仅仅是hidde空间的一个使用场景，还可以收集用户信息、确定用户身份、判断提交源，在多个form表单中建立关节联、做全局变量等，总的来说应用方式还是很广的。

在目前这个阶段就只需要知道这两控件能干什么和基础写法，计算完成后面到具体的使用场景时会再详细讲解。

好了，今天的分享就到这里，希望各位同学下去能够照着写三遍，做到不看视频也能够写出来，所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法，点赞点关注吧！

ailBee.NET Objects是一款为创建、发送、接收以及处理电子邮件而设计的健壮、功能丰富的.NET控件。几行代码便可为应用程序添加E-Mail支持，简单高效。具备“必需”以及独特的功能，这些控件帮助开发人员简单快速地将复杂的电子邮件功能添加到他们的应用程序中。

本文主要介绍了在桌面应用程序中显示HTML/纯文本邮件的代码示例。目前MailBee.NET Objects在线订购享75折优惠正在进行中，欢迎您下载试用版进行运用！

如果你需要在桌面应用程序中以纯文本控件（如Memo）显示HTML消息，则应将HTML文本转换为纯文本。

C＃
msg.Parser.HtmlToPlainMode=HtmlToPlainAutoConvert.IfNoPlain;
VB.NET
msg.Parser.HtmlToPlainMode=HtmlToPlainAutoConvert.IfNoPlain

上面的代码将邮件转换为纯文本。然后你可以显示如下的纯文本正文（假设textBox1是表单上的文本控件）：

在线咨询

上一篇：别痴呆，上几题老简单老简单的html试题
下一篇：JavaScript 基础概念-布尔操作符

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

输入类组件 —— input

文本域 —— textarea

下拉菜单和多选列表

您的项目需求