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

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

TML 服务器控件是服务器可理解的 HTML 标签。

HTML 服务器控件

ASP.NET 文件中的 HTML 元素，默认是作为文本进行处理的。要想让这些元素可编程，需向 HTML 元素中添加 runat="server" 属性。这个属性表示，该元素将被作为服务器控件进行处理。

注释：所有 HTML 服务器控件必须位于带有 runat="server" 属性的 <form> 标签内！

注释：ASP.NET 要求所有 HTML 元素必须正确关闭和正确嵌套。

HTML 服务器控件	描述
HtmlAnchor	控制 <a> HTML 元素
HtmlButton	控制 <button> HTML 元素
HtmlForm	控制 <form> HTML 元素
HtmlGeneric	控制其他未被具体的 HTML 服务器控件规定的 HTML 元素，比如 <body>、<div>、<span> 等。
HtmlImage	控制 <image> HTML 元素
HtmlInputButton	控制 <input type="button">、<input type="submit"> 和 <input type="reset"> HTML 元素
HtmlInputCheckBox	控制 <input type="checkbox"> HTML 元素
HtmlInputFile	控制 <input type="file"> HTML 元素
HtmlInputHidden	控制 <input type="hidden"> HTML 元素
HtmlInputImage	控制 <input type="image"> HTML 元素
HtmlInputRadioButton	控制 <input type="radio"> HTML 元素
HtmlInputText	控制 <input type="text"> 和 <input type="password"> HTML 元素
HtmlSelect	控制 <select> HTML 元素
HtmlTable	控制 <table> HTML 元素
HtmlTableCell	控制 <td> 和 <th> HTML 元素
HtmlTableRow	控制 <tr> HTML 元素
HtmlTextArea	控制 <textarea> HTML 元素

PlainTextEdit简介

QPlainTextEdit小部件是一个用于编辑和显示纯文本控件，QPlainTextEdit控件与QTextEdit控件使用了相同的技术和概念，但是它为纯文本处理提供了优化。QPlainTextEdit是一个支持纯文本的高级查看器/编辑器，可以处理大型文档并对用户输入做出快速响应。

QPlainTextEdit支持文本段落，在默认情况下，一个换行符表示一个段落，文档可以一个或者多个段落组成，且段落中的每个字符都可以有其自己的属性，例如有自己的字体和颜色。

QPlainTextEdit常用作文本显示器或文本编辑器。

QPlaintTextEdit常用方法：

setPlainText()：设置多行文本框的内容；
insertPlainText()：插入普通文本；
appendPlainText()：添加普通文本；
appendHtml()：添加HTML文本内容；
setReadOnly()：设置成只读模式；
isReadOnly()：是否是只读模式；
setLineWrapMode()：设置换行模式，取值为（QPlainTextEdit.NoWrap：不自动换行（缺省值），QPlainTextEdit.WidgetWidth: 根据文本框的宽度自动换行.）；
lineWrapMode()：换行模式

QPlaintTextEdit中的常用信号:

textChanged：文本内容发生改变时触发；
selectionChanged：选中内容发生改变时触发；
cursorPositionChanged：光标位置发生改变触发；
copyAvailable：复制可用时触发
redoAvailable：重做可用触发
undoAvailable：撤销可用触发

QPlainTextEdit是一个功能强大的文本编辑器控件，有兴趣的童鞋可进一步研究。

QPlainTextEdit类继承关系：

测试QPlainTextEdit

测试程序实现简单的文本编辑器，可以新建，打开一个文本文件，然后进行编辑并保存。使用Qt Designer生成ui文件. 然后在代码中是有uic直接调用布局文件。创建文件qplaintextedit.py, 代码如下：

import sys,os
from PyQt5 import QtCore, QtGui, QtWidgets, uic
from PyQt5.QtWidgets import (QApplication, QWidget, QPlainTextEdit, QToolButton, QStyle, QMessageBox, QFileDialog)
 
class DemoPlainTextEdit(QWidget):
    def __init__(self, parent=None):
        super(DemoPlainTextEdit, self).__init__(parent)
        
        self.path = None
        
        uic.loadUi(os.path.dirname(__file__) + '/textedit.ui', self)
        
        self.btnNewFile.setIcon(QApplication.style().standardIcon(QStyle.SP_FileIcon))
        self.btnNewFile.clicked.connect(self.onFileNew)
        self.btnOpenFile.setIcon(QApplication.style().standardIcon(QStyle.SP_DialogOpenButton))
        self.btnOpenFile.clicked.connect(self.onFileOpen)
        self.btnSaveFile.setIcon(QApplication.style().standardIcon(QStyle.SP_DialogSaveButton))
        self.btnSaveFile.clicked.connect(self.onSaveFile)
        self.btnSaveFileAs.setIcon(QApplication.style().standardIcon(QStyle.SP_DialogSaveButton))
        self.btnSaveFileAs.clicked.connect(self.onSaveFileAs)
        
    def msgCritical(self, strInfo):
        dlg = QMessageBox(self)
        dlg.setIcon(QMessageBox.Critical)
        dlg.setText(strInfo)
        dlg.show()
    
    def onFileNew(self):
        self.txtEdit.clear()
        
    def onFileOpen(self):
        path, _ = QFileDialog.getOpenFileName(self, '打开文件', '', '文本文件 (*.txt)')
        
        if path:
            try:
                with open(path, 'rU') as f:
                    text = f.read()
            except Exception as e:
                self.msgCritical(str(e))
            else:
                self.path = path
                self.txtEdit.setPlainText(text)
                
    def onSaveFile(self):
        if self.path is None:
            return self.onSaveFileAs()
        self._saveToPath(self.path)
        
    def onSaveFileAs(self):
        path,_ = QFileDialog.getSaveFileName(self, '保存文件', '', '文本文件 (*.txt)')
        if not path:
            return
        self._saveToPath(path)
        
    def _saveToPath(self, path):
        text = self.txtEdit.toPlainText()
        try:
            with open(path, 'w') as f:
                f.write(text)
        except Exception as e:
            self.msgCritical(str(e))
        else:
            self.path = path
               
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DemoPlainTextEdit()
    window.show()
    sys.exit(app.exec())

运行结果如图：

测试QPlainTextEdit

本文知识点

QPlainTextEdit的基本功能；
使用uic在代码中导入ui文件；
使用QFileDialog打开文件对话框；
文本文件的读写操作。

喜欢本文内容就收藏，点赞，评论，关注和转发。

在线咨询

上一篇：HTML 之简介
下一篇：产品必会的30个Axure使用技巧

您的项目需求

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

整合营销服务商

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

输入类组件 —— input

文本域 —— textarea

下拉菜单和多选列表

PlainTextEdit简介

测试QPlainTextEdit

本文知识点

您的项目需求