OOUI/Layouts/Forms

From MediaWiki.org
< OOUI‎ | Layouts
Jump to navigation Jump to search

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 checkboxesradio 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:

Example of a FormLayout.

// 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-style: dotted;
  border-width: 1px;
  padding: 20px;
}
</style>
<script>
// Create form elements (two text inputs and the button input, in this example).
var input1 = new OO.ui.TextInputWidget( { 
  placeholder: 'Username'
} );
 
var input2 = new OO.ui.TextInputWidget( { 
  placeholder: 'Password',
  type: 'password'
} );
 
var submit = new OO.ui.ButtonInputWidget( { 
  label: 'Submit'
} );
 
// Create a FieldsetLayout.
var fieldset = new OO.ui.FieldsetLayout( { 
  label: 'Using a 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'
} );
$( 'body' ).append( form.$element );

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.