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.
Prerequisites
Python IDLE 3.7
Source Code
  1. # -*- coding: utf-8 -*-
  2. from PyQt5 import QtCore, QtGui, QtWidgets
  3. class Ui_Dialog(object):
  4. def setupUi(self, Dialog):
  5. Dialog.setObjectName("Dialog")
  6. Dialog.resize(1098, 844)
  7. Dialog.setStyleSheet("background-color: rgb(85, 85, 127);")
  8. self.label = QtWidgets.QLabel(Dialog)
  9. self.label.setGeometry(QtCore.QRect(90, 270, 251, 251))
  10. self.label.setStyleSheet("background-image: url(:/newPrefix/User.png);")
  11. self.label.setText("")
  12. self.label.setObjectName("label")
  13. self.frame = QtWidgets.QFrame(Dialog)
  14. self.frame.setGeometry(QtCore.QRect(410, 40, 611, 751))
  15. self.frame.setStyleSheet("background-color: rgb(255, 255, 255);")
  16. self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
  17. self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
  18. self.frame.setObjectName("frame")
  19. self.label_2 = QtWidgets.QLabel(self.frame)
  20. self.label_2.setGeometry(QtCore.QRect(130, 40, 331, 41))
  21. font = QtGui.QFont()
  22. font.setFamily("Times New Roman")
  23. font.setPointSize(26)
  24. self.label_2.setFont(font)
  25. self.label_2.setStyleSheet("color: rgb(0, 85, 255);")
  26. self.label_2.setObjectName("label_2")
  27. self.lineEdit = QtWidgets.QLineEdit(self.frame)
  28. self.lineEdit.setGeometry(QtCore.QRect(90, 160, 421, 51))
  29. self.lineEdit.setStyleSheet("background-color: rgb(213, 213, 213);")
  30. self.lineEdit.setInputMask("")
  31. self.lineEdit.setText("")
  32. self.lineEdit.setReadOnly(False)
  33. self.lineEdit.setObjectName("lineEdit")
  34. self.lineEdit_2 = QtWidgets.QLineEdit(self.frame)
  35. self.lineEdit_2.setGeometry(QtCore.QRect(90, 250, 421, 51))
  36. self.lineEdit_2.setStyleSheet("background-color: rgb(213, 213, 213);")
  37. self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
  38. self.lineEdit_2.setObjectName("lineEdit_2")
  39. self.lineEdit_3 = QtWidgets.QLineEdit(self.frame)
  40. self.lineEdit_3.setGeometry(QtCore.QRect(90, 350, 421, 51))
  41. self.lineEdit_3.setStyleSheet("background-color: rgb(213, 213, 213);")
  42. self.lineEdit_3.setEchoMode(QtWidgets.QLineEdit.Password)
  43. self.lineEdit_3.setObjectName("lineEdit_3")
  44. self.lineEdit_4 = QtWidgets.QLineEdit(self.frame)
  45. self.lineEdit_4.setGeometry(QtCore.QRect(90, 440, 421, 51))
  46. self.lineEdit_4.setStyleSheet("background-color: rgb(213, 213, 213);")
  47. self.lineEdit_4.setObjectName("lineEdit_4")
  48. self.radioButton = QtWidgets.QRadioButton(self.frame)
  49. self.radioButton.setGeometry(QtCore.QRect(100, 530, 411, 31))
  50. font = QtGui.QFont()
  51. font.setPointSize(11)
  52. self.radioButton.setFont(font)
  53. self.radioButton.setObjectName("radioButton")
  54. self.pushButton = QtWidgets.QPushButton(self.frame)
  55. self.pushButton.setGeometry(QtCore.QRect(90, 630, 421, 51))
  56. font = QtGui.QFont()
  57. font.setPointSize(16)
  58. self.pushButton.setFont(font)
  59. self.pushButton.setStyleSheet("background-color: rgb(244, 35, 20);\n"
  60. "color: rgb(255, 255, 255);")
  61. self.pushButton.setObjectName("pushButton")
  62. self.retranslateUi(Dialog)
  63. QtCore.QMetaObject.connectSlotsByName(Dialog)
  64. def retranslateUi(self, Dialog):
  65. _translate = QtCore.QCoreApplication.translate
  66. Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
  67. self.label_2.setText(_translate("Dialog", "Create an account"))
  68. self.lineEdit.setPlaceholderText(_translate("Dialog", "User Name"))
  69. self.lineEdit_2.setPlaceholderText(_translate("Dialog", "Password"))
  70. self.lineEdit_3.setPlaceholderText(_translate("Dialog", "Retype Password"))
  71. self.lineEdit_4.setPlaceholderText(_translate("Dialog", "Email"))
  72. self.radioButton.setText(_translate("Dialog", "I Agree with Terms and Conditions"))
  73. self.pushButton.setText(_translate("Dialog", "Sign Up"))
  74. import resourcefile
  75. if __name__ == "__main__":
  76. import sys
  77. app = QtWidgets.QApplication(sys.argv)
  78. Dialog = QtWidgets.QDialog()
  79. ui = Ui_Dialog()
  80. ui.setupUi(Dialog)
  81. Dialog.show()
  82. 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.
  1. 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

  1. import sys
  2. app = QtWidgets.QApplication(sys.argv)
  3. Dialog = QtWidgets.QDialog()
  4. ui = Ui_Dialog()
  5. ui.setupUi(Dialog)
  6. 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

  1. class Ui_Dialog(object):
  2. def setupUi(self, Dialog):

Form (QDialog)

  1. Dialog.setObjectName("Dialog")
  2. Dialog.resize(1098, 844)
  3. 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)

  1. self.label = QtWidgets.QLabel(Dialog)
  2. self.label.setGeometry(QtCore.QRect(90, 270, 251, 251))
  3. self.label.setStyleSheet("background-image: url(:/newPrefix/User.png);")
  4. self.label.setText("")
  5. 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.
  1. self.frame = QtWidgets.QFrame(Dialog)
  2. self.frame.setGeometry(QtCore.QRect(410, 40, 611, 751))
  3. self.frame.setStyleSheet("background-color: rgb(255, 255, 255);")
  4. self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
  5. self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
  6. self.frame.setObjectName("frame")
  7. self.label_2 = QtWidgets.QLabel(self.frame)
  8. self.label_2.setGeometry(QtCore.QRect(130, 40, 331, 41))
  9. font = QtGui.QFont()
  10. font.setFamily("Times New Roman")
  11. font.setPointSize(26)
  12. self.label_2.setFont(font)
  13. self.label_2.setStyleSheet("color: rgb(0, 85, 255);")
  14. self.label_2.setObjectName("label_2")
  15. self.lineEdit = QtWidgets.QLineEdit(self.frame)
  16. self.lineEdit.setGeometry(QtCore.QRect(90, 160, 421, 51))
  17. self.lineEdit.setStyleSheet("background-color: rgb(213, 213, 213);")
  18. self.lineEdit.setInputMask("")
  19. self.lineEdit.setText("")
  20. self.lineEdit.setReadOnly(False)
  21. self.lineEdit.setObjectName("lineEdit")
  22. self.lineEdit_2 = QtWidgets.QLineEdit(self.frame)
  23. self.lineEdit_2.setGeometry(QtCore.QRect(90, 250, 421, 51))
  24. self.lineEdit_2.setStyleSheet("background-color: rgb(213, 213, 213);")
  25. self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
  26. self.lineEdit_2.setObjectName("lineEdit_2")
  27. self.lineEdit_3 = QtWidgets.QLineEdit(self.frame)
  28. self.lineEdit_3.setGeometry(QtCore.QRect(90, 350, 421, 51))
  29. self.lineEdit_3.setStyleSheet("background-color: rgb(213, 213, 213);")
  30. self.lineEdit_3.setEchoMode(QtWidgets.QLineEdit.Password)
  31. self.lineEdit_3.setObjectName("lineEdit_3")
  32. self.lineEdit_4 = QtWidgets.QLineEdit(self.frame)
  33. self.lineEdit_4.setGeometry(QtCore.QRect(90, 440, 421, 51))
  34. self.lineEdit_4.setStyleSheet("background-color: rgb(213, 213, 213);")
  35. self.lineEdit_4.setObjectName("lineEdit_4")
  36. self.radioButton = QtWidgets.QRadioButton(self.frame)
  37. self.radioButton.setGeometry(QtCore.QRect(100, 530, 411, 31))
  38. font = QtGui.QFont()
  39. font.setPointSize(11)
  40. self.radioButton.setFont(font)
  41. self.radioButton.setObjectName("radioButton")
  42. self.pushButton = QtWidgets.QPushButton(self.frame)
  43. self.pushButton.setGeometry(QtCore.QRect(90, 630, 421, 51))
  44. font = QtGui.QFont()
  45. font.setPointSize(16)
  46. self.pushButton.setFont(font)
  47. self.pushButton.setStyleSheet("background-color: rgb(244, 35, 20);\n"
  48. rgb(255, 255, 255);")
  49. self.pushButton.setObjectName("pushButton")
  50. self.retranslateUi(Dialog)
  51. QtCore.QMetaObject.connectSlotsByName(Dialog)
  52. retranslateUi(self, Dialog):
  53. _translate = QtCore.QCoreApplication.translate
  54. Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
  55. self.label_2.setText(_translate("Dialog", "Create an account"))
  56. self.lineEdit.setPlaceholderText(_translate("Dialog", "User Name"))
  57. self.lineEdit_2.setPlaceholderText(_translate("Dialog", "Password"))
  58. self.lineEdit_3.setPlaceholderText(_translate("Dialog", "Retype Password"))
  59. self.lineEdit_4.setPlaceholderText(_translate("Dialog", "Email"))
  60. self.radioButton.setText(_translate("Dialog", "I Agree with Terms and Conditions"))
  61. self.pushButton.setText(_translate("Dialog", "Sign Up"))

Exit()

  1. 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/