Table of contents
1.
Introduction 
2.
Custom Forms in web2py
3.
CSS Conventions
4.
Hide errors
5.
Frequently Asked Questions
5.1.
What are Custom forms in web2py?
5.2.
What is web2py?
5.3.
Can we modify the display location of the error messages in custom forms in web2py?
5.4.
What do you mean by CSS conventions?
5.5.
What are dynamic websites?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Custom Forms in web2py

Author Teesha Goyal
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction 

Web2py is an open-source python-based web application development framework. It is used for creating dynamic websites with less coding complexities using the python programming language. It offers a faster, more straightforward, and less verbose way of developing web applications, making it a good choice for beginners. 

This article will discuss custom forms, CSS conventions, and hide errors in web2py.

logo for WEB2PY

Custom Forms in web2py

Web2py is preferred over other web frameworks because of the available format/blueprint that you can use directly in your applications without writing much of the code yourself. Custom forms are one such feature of web2py. You can easily create new custom forms in web2py according to your requirements. 

custom forms

Suppose a form is being created using SQLFORM, SQLFORM.factory, or CRUD(Create, Retrieve, Update, and Delete operations). In that case, you can integrate it with a view in several ways providing you with multiple possibilities and scope for customization. 

For instance, suppose you have the following model with a defined upload action:

db.define_table('image',
    Field('name', requires=IS_NOT_EMPTY()),
    Field('source', 'upload'))

def image_upload():
	return dict(form=SQLFORM(db.image).process())

 

Then the easiest way to integrate this model with a view can be by using the following command: 

{{=form}}

 

By default, the resultant form created by this code would be in tabular format. You can also break the form into its components using widgets to give your new custom form a different layout. Following is an example of how you can break it into its components:

{{=form.custom.begin}}
Image Name: <div>{{=form.custom.widget.name}}</div>
File: <div>{{=form.custom.widget.source}}</div>
{{=form.custom.submit}}
{{=form.custom.end}}

 

This helps in building new custom forms in different formats. Also, if any error occurs in any field, it can be specified below the widget/component in which the error occurred. 

The form now created would look something like the one shown below:

Output

You can also get the above results without using a custom form with the help of formstyle keyword. Following is an example of how you can do so:

SQLFORM(..., formstyle='table2cols')


If you want to create a similar form with CRUD operations, then you can specify the formstyle keyword as follows:

crud.settings.formstyle='table2cols'

CSS Conventions

Following some of the CSS conventions are essential when developing a web application by web2py.  

CSS Conventions

Convention #1 

In SQLFORM, SQLFORM.factory, and CRUD forms, the tags adhere to a strict CSS naming convention that can be used to create custom forms further.

Suppose you create a table ‘mytable’ and field "myfield" of type "string" by the following command:

<input type="text" name="myfield" id="mytable_myfield"
       class="string" />

 

Then, by default, it is rendered by:

SQLFORM.widgets.string.widget

 

Converntion #2

The INPUT tag's class has to be the same as the field's type. This is critical for the jQuery code in "web2py ajax.html" to function correctly. It ensures that "integer" and "double" fields can only contain numbers and that "time," "date," and "datetime" fields display the popup calendar/date picker.

Convention #3

The id should consist of the class's name and the field's name separated by an underscore. 

#<class_name>_<field_name> 

This would help you identify the fields by their class name and field name and can be used while requesting JQuery. It can also help in binding together the fields inside a class together. 

Convention #4

The name should be the field name.

Hide errors

The forms or custom forms created by you are to be filled by users, and users may make errors or mistakes displayed in the form. You may want to display the errors at the top of the form instead of inside the form(under the field where the error occurs). 

Hide error

To do so, you have to disable the automatically generated error messages inside the form and specify where you want it to be displayed. 

The error message can be disabled by using the following methods:

  • For FORM or SQLFORM
    Specify hideerror = True to the accepts method.
     
  • For CRUD
    set crud.settings.hideerror=True

 

Now, you can decide where you want the errors to be displayed. Following is an example where the error is displayed at the top of the form:

{{if form.errors:}}
	Your submitted form contains the following errors:
	<ul>
	{{for fieldname in form.errors:}}
		<li>{{=fieldname}} error: {{=form.errors[fieldname]}}</li>
	{{pass}}
	</ul>
	
	{{form.errors.clear()}}
	
{{pass}}
{{=form}}

 

The errors will now be displayed at the top of the form, as shown in the below image:

output for error hide

Frequently Asked Questions

What are Custom forms in web2py?

Web2py is preferred over other web frameworks because of the available format/blueprint that you can use directly in your applications without writing much of the code yourself. Custom forms are one such feature of web2py.  

What is web2py?

Web2py is an open-source python-based web application development framework. It is used for creating dynamic websites with less coding complexities using the python programming language. It offers a faster, more straightforward, and less verbose way of developing web applications, making it a good choice for beginners. 

Can we modify the display location of the error messages in custom forms in web2py?

Yes, suppose we don't want the error messages displayed at their default location. In that case, we can disable the automatically generated error messages and then specify where we want them displayed. 

What do you mean by CSS conventions?

Conventions are the agreed notions to be used by all to maintain commonality. In web2y, certain CSS conventions help make it easier for the developer's community to collaborate. 

What are dynamic websites?

The full stack applications that take in user data and have database connectivity are called dynamic websites. Such websites are more challenging to build than static websites as they require backend development also. 

Conclusion

This article discussed some of the critical points of web2py. We discussed custom forms, CSS conventions, and hide errors in web2py.

I hope you would have gained a better understanding of these topics now!

Are you planning to ace the interviews of reputed product-based companies like AmazonGoogleMicrosoft, and more? 

Attempt our Online Mock Test Series on Coding Ninjas Studio now!

Thank you

Happy Coding!

Live masterclass