PyQt5 - Registration Form Source Example

Introduction

 

PyQt5 is one of the best growing Python GUI frameworks for developing desktop and standalone applications. It is available for Linux, Windows, and Mac OS X based upon commercial as well as opensource licenses. This article is entirely focused on how the PyQt5 objects perform well to make an attractive registration form.  

• PyQt5-Hello world example
• PyQt5 – Simple registration form

Prerequisites

 

Python IDLE 3.7

 

Source Code

# -*- coding: utf-8 -*-
from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(1098, 844)
        Dialog.setStyleSheet("background-color: rgb(85, 85, 127);")
        self.label = QtWidgets.QLabel(Dialog)
        self.label.setGeometry(QtCore.QRect(90, 270, 251, 251))
        self.label.setStyleSheet("background-image: url(:/newPrefix/User.png);")
        self.label.setText("")
        self.label.setObjectName("label")
        self.frame = QtWidgets.QFrame(Dialog)
        self.frame.setGeometry(QtCore.QRect(410, 40, 611, 751))
        self.frame.setStyleSheet("background-color: rgb(255, 255, 255);")
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        self.label_2 = QtWidgets.QLabel(self.frame)
        self.label_2.setGeometry(QtCore.QRect(130, 40, 331, 41))
        font = QtGui.QFont()
        font.setFamily("Times New Roman")
        font.setPointSize(26)
        self.label_2.setFont(font)
        self.label_2.setStyleSheet("color: rgb(0, 85, 255);")
        self.label_2.setObjectName("label_2")
        self.lineEdit = QtWidgets.QLineEdit(self.frame)
        self.lineEdit.setGeometry(QtCore.QRect(90, 160, 421, 51))
        self.lineEdit.setStyleSheet("background-color: rgb(213, 213, 213);")
        self.lineEdit.setInputMask("")
        self.lineEdit.setText("")
        self.lineEdit.setReadOnly(False)
        self.lineEdit.setObjectName("lineEdit")
        self.lineEdit_2 = QtWidgets.QLineEdit(self.frame)
        self.lineEdit_2.setGeometry(QtCore.QRect(90, 250, 421, 51))
        self.lineEdit_2.setStyleSheet("background-color: rgb(213, 213, 213);")
        self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.lineEdit_3 = QtWidgets.QLineEdit(self.frame)
        self.lineEdit_3.setGeometry(QtCore.QRect(90, 350, 421, 51))
        self.lineEdit_3.setStyleSheet("background-color: rgb(213, 213, 213);")
        self.lineEdit_3.setEchoMode(QtWidgets.QLineEdit.Password)
        self.lineEdit_3.setObjectName("lineEdit_3")
        self.lineEdit_4 = QtWidgets.QLineEdit(self.frame)
        self.lineEdit_4.setGeometry(QtCore.QRect(90, 440, 421, 51))
        self.lineEdit_4.setStyleSheet("background-color: rgb(213, 213, 213);")
        self.lineEdit_4.setObjectName("lineEdit_4")
        self.radioButton = QtWidgets.QRadioButton(self.frame)
        self.radioButton.setGeometry(QtCore.QRect(100, 530, 411, 31))
        font = QtGui.QFont()
        font.setPointSize(11)
        self.radioButton.setFont(font)
        self.radioButton.setObjectName("radioButton")
        self.pushButton = QtWidgets.QPushButton(self.frame)
        self.pushButton.setGeometry(QtCore.QRect(90, 630, 421, 51))
        font = QtGui.QFont()
        font.setPointSize(16)
        self.pushButton.setFont(font)
        self.pushButton.setStyleSheet("background-color: rgb(244, 35, 20);\n"
"color: rgb(255, 255, 255);")
        self.pushButton.setObjectName("pushButton")

        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.label_2.setText(_translate("Dialog", "Create an account"))
        self.lineEdit.setPlaceholderText(_translate("Dialog", "User Name"))
        self.lineEdit_2.setPlaceholderText(_translate("Dialog", "Password"))
        self.lineEdit_3.setPlaceholderText(_translate("Dialog", "Retype Password"))
        self.lineEdit_4.setPlaceholderText(_translate("Dialog", "Email"))
        self.radioButton.setText(_translate("Dialog", "I Agree with Terms and Conditions"))
        self.pushButton.setText(_translate("Dialog", "Sign Up"))


import resourcefile

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Dialog = QtWidgets.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())

PyQt5 contains a lot of modules for handling various widgets and program functions. The above code contains -

1. Dialog Form      -QDialog
2. Frame               - QFrame
3. Two Text label   -QLabel
4. Four Line Edits  -QLineEdit
5. Radio button     -QRadioButton
6. Push Button      -QPushButton

We have split the above code up into small pieces for clear understanding.

from PyQt5 import QtCore, QtGui, QtWidgets

The imported packages from PyQt5 modules are essentially responsible for the aforementioned objects. Now, we are ready to handle those objects.

 

Initiation

import sys
app = QtWidgets.QApplication(sys.argv)
Dialog = QtWidgets.QDialog()
ui = Ui_Dialog()
ui.setupUi(Dialog)
Dialog.show()

Every program in PyQt5 should create an application object and follow by the parameter. The “sys.arg” will control the program initiation. Then, the dialog variable can hold the QDialog(Frame) with the help of QtWidgets. Next, we will need to create an object that belongs to the class (Ui_Dialog()) for accessing our methods. Then, the Dialog.show() argument is performed to execute the class as well as create a function of it.

 

Class and Function

class Ui_Dialog(object):
    def setupUi(self, Dialog):

• To declare the class, class name, and parameter, every function within the class is considered as an object.
• To declare function naming as setupUi(self,Dialog) which the parameter “self” represented as an instance of the class to access their attributes and methods.

Form (QDialog)

Dialog.setObjectName("Dialog")
Dialog.resize(1098, 844)
Dialog.setStyleSheet("background-color: rgb(85, 85, 127);")

The setObjectName() naming the Dialog. The Resize() method resize the Dialog according to their parameter 1089px width and 844px height. To change the background color with help of setStylesheet() method and followed RGB color codes.

 

Label (QLabel)

self.label = QtWidgets.QLabel(Dialog)
self.label.setGeometry(QtCore.QRect(90, 270, 251, 251))
self.label.setStyleSheet("background-image: url(:/newPrefix/User.png);")
self.label.setText("")
self.label.setObjectName("label")

To add a label with Dialog frame and set the Geometry position on the Frame with the help of the “setGeometry()” method, the first two parameters are x and y positions of the window, followed by the height and width of the window.

 

Let’s move on to creating a frame. Line edits, Radio button, and Push button are nearly the same as above.

self.frame = QtWidgets.QFrame(Dialog)
self.frame.setGeometry(QtCore.QRect(410, 40, 611, 751))
self.frame.setStyleSheet("background-color: rgb(255, 255, 255);")
self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
self.frame.setObjectName("frame")
self.label_2 = QtWidgets.QLabel(self.frame)
self.label_2.setGeometry(QtCore.QRect(130, 40, 331, 41))
font = QtGui.QFont()
font.setFamily("Times New Roman")
font.setPointSize(26)
self.label_2.setFont(font)
self.label_2.setStyleSheet("color: rgb(0, 85, 255);")
self.label_2.setObjectName("label_2")
self.lineEdit = QtWidgets.QLineEdit(self.frame)
self.lineEdit.setGeometry(QtCore.QRect(90, 160, 421, 51))
self.lineEdit.setStyleSheet("background-color: rgb(213, 213, 213);")
self.lineEdit.setInputMask("")
self.lineEdit.setText("")
self.lineEdit.setReadOnly(False)
self.lineEdit.setObjectName("lineEdit")
self.lineEdit_2 = QtWidgets.QLineEdit(self.frame)
self.lineEdit_2.setGeometry(QtCore.QRect(90, 250, 421, 51))
self.lineEdit_2.setStyleSheet("background-color: rgb(213, 213, 213);")
self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
self.lineEdit_2.setObjectName("lineEdit_2")
self.lineEdit_3 = QtWidgets.QLineEdit(self.frame)
self.lineEdit_3.setGeometry(QtCore.QRect(90, 350, 421, 51))
self.lineEdit_3.setStyleSheet("background-color: rgb(213, 213, 213);")
self.lineEdit_3.setEchoMode(QtWidgets.QLineEdit.Password)
self.lineEdit_3.setObjectName("lineEdit_3")
self.lineEdit_4 = QtWidgets.QLineEdit(self.frame)
self.lineEdit_4.setGeometry(QtCore.QRect(90, 440, 421, 51))
self.lineEdit_4.setStyleSheet("background-color: rgb(213, 213, 213);")
self.lineEdit_4.setObjectName("lineEdit_4")
self.radioButton = QtWidgets.QRadioButton(self.frame)
self.radioButton.setGeometry(QtCore.QRect(100, 530, 411, 31))
font = QtGui.QFont()
font.setPointSize(11)
self.radioButton.setFont(font)
self.radioButton.setObjectName("radioButton")
self.pushButton = QtWidgets.QPushButton(self.frame)
self.pushButton.setGeometry(QtCore.QRect(90, 630, 421, 51))
font = QtGui.QFont()
font.setPointSize(16)
self.pushButton.setFont(font)
self.pushButton.setStyleSheet("background-color: rgb(244, 35, 20);\n"
rgb(255, 255, 255);")
self.pushButton.setObjectName("pushButton")

self.retranslateUi(Dialog)
QtCore.QMetaObject.connectSlotsByName(Dialog)

retranslateUi(self, Dialog):
_translate = QtCore.QCoreApplication.translate
Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
self.label_2.setText(_translate("Dialog", "Create an account"))
self.lineEdit.setPlaceholderText(_translate("Dialog", "User Name"))
self.lineEdit_2.setPlaceholderText(_translate("Dialog", "Password"))
self.lineEdit_3.setPlaceholderText(_translate("Dialog", "Retype Password"))
self.lineEdit_4.setPlaceholderText(_translate("Dialog", "Email"))
self.radioButton.setText(_translate("Dialog", "I Agree with Terms and Conditions"))
self.pushButton.setText(_translate("Dialog", "Sign Up"))

• The EchoMode() method ensures that each character input is echoed to the screen. 
• The setText() method can hold our desired textbox value.
• The font.setPointSize() argument is performed to customize the font. 
• The setPlaceholderText() method is performed to placing their values, some of which are thought of shared type. It is generally useful for quick identification of Line edit objects.

Exit()

sys.exit(app.exec_())

Finally, we are reaching the end loop of an application. It receives events from the window system and notifies the application widgets.

 

The sys.exit() method is used for enabling a clean exit.

 

Now, it is time to run the program in our convenient environment.

 

 

Summary

 

In this discussion, we learned how to develop a simple and attractive Python registration form, step by step. I hope you understood something new.

 

References

https://pythonspot.com/pyqt5-form-layout/
https://build-system.fman.io/pyqt5-tutorial
https://likegeeks.com/pyqt5-tutorial/