OOUI/Layouts/Forms

<!-- 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:1pxdotted#c8ccd1;
padding:16px;
}
</style>
<script>
// Create form elements (two text inputs and the button input, in this example).
varinput1=newOO.ui.TextInputWidget({
value:'username'
}),
input2=newOO.ui.TextInputWidget({
value:'password',
type:'password'
}),
submit=newOO.ui.ButtonInputWidget({
label:'Login',
flags:[
'primary',
'progressive'
]
}),

// Create a FieldsetLayout.
fieldset=newOO.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([
newOO.ui.FieldLayout(input1,{
label:'Username',
align:'top'
}),
newOO.ui.FieldLayout(input2,{
label:'Password',
align:'top'
}),
newOO.ui.FieldLayout(submit)
]);

// Add the FieldsetLayout to a FormLayout. 
varform=newOO.ui.FormLayout({
items:[fieldset],
action:'/api/formhandler',
method:'get'
});
$(document.body).append(form.$element);
</script>