jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
90 lines (84 loc) • 4.13 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="JavaScript Form, HTML Form, jQuery Forms widget" />
<meta name="description" content="The jqxForm widget helps you build interactive HTML JSON forms. It offers rich functionality and layout options."/>
<title id='Description'>jQuery Form Input Elements and Labels Positioning</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.office.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxform.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = $.data(document.body, 'theme');
if (theme == null || theme == undefined)
theme = 'classic';
var template = [
{
bind: 'item1',
type: 'text',
label: 'Label position left',
labelPosition: 'left',
align: 'left',
width: '200px',
required: true
},
{
bind: 'item2',
type: 'text',
label: 'Label position right',
labelPosition: 'right',
align: 'left',
width: '200px',
required: true,
requiredPosition: 'left'
},
{
bind: 'item3',
type: 'text',
label: 'Label position top',
labelPosition: 'top',
align: 'left',
width: '200px',
required: true
},
{
bind: 'item4',
type: 'text',
label: 'Label position bottom',
labelPosition: 'bottom',
labelAlign: 'left',
width: '200px',
required: true
}
];
$('#sampleForm').jqxForm({
template: template,
padding: { left: 10, top: 10, right: 10, bottom: 10 }
});
});
</script>
</head>
<body class='default'>
<div id='sampleForm' style="width: 500px; height: auto;"></div>
<div class="example-description">
<h2>Description</h2>
<div style="width: 800px;">
This example shows you how to change the position of the labels relative to the respective input elements.
The labels can be positioned on the 'left', 'right', 'top' or 'bottom' of the input element.
To change the label position, set the labelPosition property to the desired value. The default position is on the left side of the input element.
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>