Good practice: Styling input fields in HTML

URCap Development HTML
1

When your URCap may contain multiple input fields, it is often desired to shape and size these differently, depending on the type of input (text, small numerics, long numbers etc.)

Using the CSS class element in input elements, allows you to design multiple sizes and appearances of input elements.

E.g. this HTML code:

<!DOCTYPE html>
<html>
	<head>
		<title>My Installation</title>
		<style>
			input.bignum {
				display: inline-block;
				width: 120px;
				height: 25px;
			}
			input.smallnum {
				display: inline-block;
				width: 50px;
				height: 25px;
			}
			input.bigsquarebut {
				display: block;
				width: 100px;
				height: 100px;
			}
			div.spacer {
				padding-top: 10px;
	 		}
		</style>
	</head>
	<body>
		<h3> Settings </h3>
		<p> Please input information: </p>
		<form>
			My big number: <input class="bignum" id="bignumber" type="number" step="1" min="0"> <br>
			My small number: <input class="smallnum" id="smallnumber" type="number" min="0"> <br>
			<div class="spacer">&nbsp;</div>
			<input class="bigsquarebut" id="somebutton" type="button" />
		</form>		
	</body>
</html>

Will yield the following result:

Hence, by adding the class="bignum"or other pre-defined style class to the input element, this will inherit these settings.

In this case, the text in the button is set in the same way as a multiline label with BUTTON.setText("<html>SQUARE<br>BUTTON<br>TEXT") from the Java layer.

1 Like