SandBox

Hey how are
you?

I am doing fine

1. is this right?
   1. I guess so
   2. I guess I am
      1. I am pretty sure I am right

<script> <style> body {

 font-family: sans-serif;
 font-size: 0.875em;

}

.container {

 width: 600px;
 height: 300px;
 border-style: dotted;
 border-width: 1px;
 padding: 20px;

} </style>

<script>

// Create form  elements (text input, checkbox, submit button, etc.)

var input1 = new OO.ui.TextInputWidget( {

 placeholder: 'A form text field'

} );

var input2 = new OO.ui.TextInputWidget( {

 placeholder: 'A form text field'

} );

var input3 = new OO.ui.TextInputWidget( {

 placeholder: 'A form text field with help'

} );

var input4 = new OO.ui.CheckboxInputWidget( {

 selected: true

} );

// Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( {

 label: 'FieldsetLayout: Examples of label alignment and help text',
 classes: ["container"]

} );

// Add field layouts that contain the form elements to the fieldset. Items can // also be specified with the FieldsetLayout's `items` config option:

fieldset.addItems( [

 new OO.ui.FieldLayout( input1, {
   label: 'Left-aligned label, the default', 
   align: 'left' 
 } ),

 new OO.ui.FieldLayout( input2, { 
   label: 'Right-aligned label',
   align: 'right' 
 } ),

 new OO.ui.FieldLayout( input3, { 
   label: 'Top-aligned label', 
   align: 'top', 
   help: 'A bit of help'
 } ),

 new OO.ui.FieldLayout( input4, { 
   label: 'Inline label', 
   align: 'inline' 
 } )

] );

$( 'body' ).append( fieldset.$element ); </script>