OOUI/Layouts/Forms

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

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.