Skip to content

Instantly share code, notes, and snippets.

@ripla

ripla/SimpleFormExample.html

Created April 27, 2017 14:52
Show Gist options
  • Save ripla/d06d35249ffc4859e7b280425c1e92eb to your computer and use it in GitHub Desktop.
Save ripla/d06d35249ffc4859e7b280425c1e92eb to your computer and use it in GitHub Desktop.
Download ZIP
Super simple Vaadin form using VerticalLayout, HorizontalLayout and FormLayout
Raw
SimpleFormExample.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="design-properties" content="{&quot;RULERS_VISIBLE&quot;:true,&quot;GUIDELINES_VISIBLE&quot;:false,&quot;SNAP_TO_OBJECTS&quot;:true,&quot;SNAP_TO_GRID&quot;:true,&quot;SNAPPING_DISTANCE&quot;:10,&quot;GENERATE_GETTERS&quot;:false,&quot;JAVA_SOURCES_ROOT&quot;:&quot;src/main/java&quot;,&quot;THEME&quot;:&quot;valo&quot;}">
<meta name="vaadin-version" content="8.0.5">
</head>
<body>
<vaadin-vertical-layout spacing="false">
<vaadin-horizontal-layout width-full>
<vaadin-form-layout :expand>
<vaadin-check-box caption="Is it?"></vaadin-check-box>
<vaadin-check-box caption="Is it not?"></vaadin-check-box>
<vaadin-text-field caption="Name" width-full></vaadin-text-field>
<vaadin-text-field caption="Address" width-full></vaadin-text-field>
<vaadin-text-field caption="Phone" width-full></vaadin-text-field>
<vaadin-radio-button-group caption="Gender" style-name="horizontal" data-item-type="java.lang.String">
<option item="Option1">Male</option>
<option item="Option2">Female</option>
<option item="Option3">Other</option>
</vaadin-radio-button-group>
</vaadin-form-layout>
<vaadin-form-layout :expand>
<vaadin-check-box caption="Is it?"></vaadin-check-box>
<vaadin-check-box caption="Is it not?"></vaadin-check-box>
<vaadin-text-field caption="Name" width-full></vaadin-text-field>
<vaadin-text-field caption="Address" width-full></vaadin-text-field>
<vaadin-text-field caption="Phone" width-full></vaadin-text-field>
<vaadin-radio-button-group caption="Gender" style-name="horizontal" data-item-type="java.lang.String">
<option item="Option1">Male</option>
<option item="Option2">Female</option>
<option item="Option3">Other</option>
</vaadin-radio-button-group>
</vaadin-form-layout>
</vaadin-horizontal-layout>
<vaadin-form-layout margin="false">
<vaadin-text-area caption="Description" width-full></vaadin-text-area>
</vaadin-form-layout>
<vaadin-horizontal-layout width-full>
<vaadin-form-layout :expand>
<vaadin-check-box caption="Is it?"></vaadin-check-box>
<vaadin-check-box caption="Is it not?"></vaadin-check-box>
<vaadin-text-field caption="Name" width-full></vaadin-text-field>
<vaadin-text-field caption="Address" width-full></vaadin-text-field>
<vaadin-text-field caption="Phone" width-full></vaadin-text-field>
<vaadin-radio-button-group caption="Gender" style-name="horizontal" data-item-type="java.lang.String">
<option item="Option1">Male</option>
<option item="Option2">Female</option>
<option item="Option3">Other</option>
</vaadin-radio-button-group>
</vaadin-form-layout>
<vaadin-form-layout :expand>
<vaadin-check-box caption="Is it?"></vaadin-check-box>
<vaadin-check-box caption="Is it not?"></vaadin-check-box>
<vaadin-text-field caption="Name" width-full></vaadin-text-field>
<vaadin-text-field caption="Address" width-full></vaadin-text-field>
<vaadin-text-field caption="Phone" width-full></vaadin-text-field>
<vaadin-radio-button-group caption="Gender" style-name="horizontal" data-item-type="java.lang.String">
<option item="Option1">Male</option>
<option item="Option2">Female</option>
<option item="Option3">Other</option>
</vaadin-radio-button-group>
</vaadin-form-layout>
</vaadin-horizontal-layout>
</vaadin-vertical-layout>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment