OOUI/Layouts/Forms

FormLayouts are used to wrap FieldsetLayouts when you intend to use browser-based form submission for the fields, rather than handling them in JavaScript. Only widgets from the InputWidget family support form submission. Input widgets include standard form elements like checkboxes, radio buttons and text fields, as well as some fancier controls. Some controls have both regular and input variants, for example, DropdownWidget and DropdownInputWidget – only the latter support form submission and often have simplified APIs to match the capabilities of HTML forms.

The following example illustrates a simple login form:

<!-- This example illustrates a FormLayout that contains a FieldsetLayout (which in  
     turn contains FieldLayouts for the text input fields and input button). -->
<style>
body {
	font-family: sans-serif;
	font-size: 0.875em;
}
.container {
	width: 500px;
	height: 230px;
	border: 1px dotted #c8ccd1;
	padding: 16px;
}
</style>
<script>
// Create form elements (two text inputs and the button input, in this example).
var input1 = new OO.ui.TextInputWidget( { 
		value: 'username'
	} ),
	input2 = new OO.ui.TextInputWidget( { 
		value: 'password',
		type: 'password'
	} ),
 	submit = new OO.ui.ButtonInputWidget( { 
		label: 'Login',
		flags: [
			'primary',
			'progressive'
		]
	} ),
 
// Create a FieldsetLayout.
	fieldset = new OO.ui.FieldsetLayout( { 
		label: 'Login form layout with a fieldset layout',
		classes: [ 'container' ]
	} );
 
// Use the addItems() method to add FieldLayouts that contain the form 
// elements (the text inputs and submit button) to the FieldsetLayout:
fieldset.addItems( [ 
	new OO.ui.FieldLayout( input1, {
		label: 'Username', 
		align: 'top' 
	} ),
	new OO.ui.FieldLayout( input2, { 
		label: 'Password',
		align: 'top' 
	} ),
	new OO.ui.FieldLayout( submit )    
] );
 
// Add the FieldsetLayout to a FormLayout. 
var form = new OO.ui.FormLayout(  {
	items: [ fieldset ],
	action: '/api/formhandler',
	method: 'get'
} );
$( document.body ).append( form.$element );
</script>

Form layouts can be configured with an HTML form action, an encoding type, and a method using the action, enctype, and method configs, respectively.

For a full list of supported methods and configuration options, please see the code-level documentation.