XQA
Back to Python
2026-03-276 min read

Custom Checkbox/Radio (Python Programming)

Learn Custom Checkbox/Radio (Python Programming) step by step with clear examples and exercises.

Why This Matters

In this lesson, we'll learn how to create custom checkboxes and radio buttons using Python programming. This skill is crucial for creating interactive web applications with a unique design that stands out from the crowd.

Why This Matters

Customizing form elements like checkboxes and radio buttons can significantly enhance the user experience of your web application, making it more visually appealing and engaging. Moreover, having this skill under your belt will make you stand out in job interviews and help you tackle real-world programming challenges.

Prerequisites

To follow along with this lesson, you should have a basic understanding of Python programming and be familiar with HTML and CSS for creating web pages. If you're new to Python, consider checking out our Python for Beginners tutorial first.

Core Concept

To create custom checkboxes and radio buttons in a web application using Python, we will use the Flask web framework along with HTML and CSS. Here's an outline of the steps involved:

  1. Install Flask: First, make sure you have Flask installed on your system. If not, install it using pip: pip install flask.
  2. Create a new project folder: Create a new folder for your project and navigate to it in your terminal or command prompt.
  3. Initialize the project: Run python -m venv venv to create a virtual environment named "venv". Activate the virtual environment using source venv/bin/activate (on Linux/macOS) or venv\Scripts\activate (on Windows).
  4. Create a new Flask app: Run pip install flask if it's not already installed in your virtual environment, and then create a new file named app.py.
  5. Import necessary libraries: In app.py, import the Flask library and any other required modules.
  6. Define the application: Create an instance of the Flask class and define routes for handling different URLs.
  7. Create HTML templates: Create separate HTML files for your checkboxes and radio buttons, including the necessary CSS styles.
  8. Render templates in Flask: In your Flask app, use the render_template function to render the HTML templates and send them as a response to the client.
  9. Handle form submissions: Write code to handle form submissions, such as processing user input and displaying appropriate feedback.

Worked Example

Let's create a simple web application with custom checkboxes and radio buttons. In this example, we will have a form that allows users to select their favorite programming languages using checkboxes and choose their preferred operating system using radio buttons.

  1. Create the project folder:
mkdir custom_checkbox_radio
cd custom_checkbox_radio
  1. Install Flask:
pip install flask
  1. Create app.py:
touch app.py
  1. Open app.py and add the following code:
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
return render_template('index.html')

if __name__ == '__main__':
app.run(debug=True)
  1. Create a new folder named templates and create two HTML files inside it: form.html for the form and result.html for displaying the user's selection.
  2. Add the following code to form.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Checkbox/Radio Buttons</title>
<style>
/* Add your custom styles here */
</style>
</head>
<body>
<h1>Select Your Preferences</h1>
<form action="/" method="post">
<h2>Programming Languages:</h2>
<label for="python">Python</label>
<input type="checkbox" id="python" name="languages[]" value="python">
<br>
<label for="java">Java</label>
<input type="checkbox" id="java" name="languages[]" value="java">
<br>
<label for="javascript">JavaScript</label>
<input type="checkbox" id="javascript" name="languages[]" value="javascript">
<br>
<h2>Operating Systems:</h2>
<label for="windows">Windows</label>
<input type="radio" id="windows" name="os" value="windows">
<br>
<label for="linux">Linux</label>
<input type="radio" id="linux" name="os" value="linux">
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
  1. Add the following code to result.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Results</title>
<style>
/* Add your custom styles here */
</style>
</head>
<body>
<h1>Your Preferences:</h1>
<ul id="preferences">
<!-- The user's preferences will be displayed here -->
</ul>
<a href="/">Go Back</a>
</body>
</html>
  1. Update app.py to handle form submissions:
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
if request.method == 'POST':
languages = request.form.getlist('languages[]')
os = request.form.get('os')

preferences = f"<ul>\n <li>Programming Languages:</li>\n {', '.join(languages)}\n</ul>\n"
preferences += f"<li>Operating System: {os}</li>"

return render_template('result.html', preferences=preferences)
else:
return render_template('form.html')

if __name__ == '__main__':
app.run(debug=True)
  1. Run the application:
python app.py
  1. Open your web browser and navigate to http://127.0.0.1:5000/. You should now see the custom checkbox/radio button form we created.

Common Mistakes

  1. Forgetting to activate the virtual environment: Make sure you activate the virtual environment before running your Flask app using source venv/bin/activate (on Linux/macOS) or venv\Scripts\activate (on Windows).
  2. Using incorrect HTML syntax for checkboxes and radio buttons: Ensure that you use the correct syntax, including the square brackets [] for multiple selections with checkboxes and the name attribute for both checkboxes and radio buttons.
  3. Not rendering the appropriate template: Double-check that you're using the correct template (form.html or result.html) in your Flask app based on the request method (GET or POST).
  4. Incorrectly handling form data: Make sure you correctly retrieve and process the user's selection from the form data using the appropriate methods like get(), getlist(), and getvalue().
  5. Not updating the page after form submission: If you don't see any changes on the page after submitting the form, make sure that you're properly rendering the result.html template with the user's preferences.

Practice Questions

  1. Modify the example to include a dropdown for selecting a favorite IDE (Integrated Development Environment).
  2. Add validation to ensure that at least one programming language is selected before submitting the form.
  3. Style the custom checkboxes and radio buttons to match your preferred design.
  4. Implement a feature that allows users to save their preferences as cookies for future visits.
  5. Create a new route that displays a list of all saved preferences from cookies.

FAQ

Q: Why do I need Flask for this project?

A: Flask is a lightweight web framework for Python that makes it easy to create web applications, including handling form submissions and rendering templates.

Q: Can I use other libraries or frameworks instead of Flask for this project?

A: Yes, there are several other libraries and frameworks available for creating web applications with Python, such as Django, Pyramid, and FastAPI. However, Flask is a popular choice due to its simplicity and ease of use.

Q: How can I style my custom checkboxes and radio buttons using CSS?

A: You can use various CSS properties like appearance, background-image, and border to customize the appearance of your form elements. Consider checking out online resources for inspiration and examples.

Q: What if I want to create a standalone HTML file with custom checkboxes and radio buttons instead of using Flask?

A: It's possible to create a standalone HTML file with custom checkboxes and radio buttons, but you'll need to handle form submissions on the client-side using JavaScript or server-side using a language like PHP, Node.js, or Python (with a library like Tornado).

Q: How can I make my web application more secure?

A: There are several ways to improve the security of your web application, such as validating user input, sanitizing data, using HTTPS, and implementing CSRF protection. Consider researching best practices for securing web applications when you're ready to deploy your project.

Custom Checkbox/Radio (Python Programming) | Python | XQA Learn