Read Only Fields

<form class="form mt-xl">
	<fieldset>
		<legend>Read Only Text fields</legend>
		<ol>
			<li>
				<label for="readonly-text-field">Text Field 100%</label>
				<input type="text" id="readonly-text-field" readonly="readOnly" value="Text field 100%"/>
			</li>
			<li>
				<label for="readonly-text-field2">Text Field <em>label class="w-50"</em></label>
				<input type="text" id="readonly-text-field2" readonly="readOnly" class="w-50" value="Text field 50% - w-50"/>
			</li>

			<li>
				<label for="readonly-url-field">URL Field</label>
				<input type="url" id="readonly-url-field" readonly="readOnly" value="http://website.com" />
			</li>
			<li>
				<label for="readonly-email-field">Email Field</label>
				<input type="email" id="readonly-email-field" readonly="readOnly" value="your.email@website.com" />
			</li>
			<li>
				<label for="readonly-Password-field">Password Field</label>
				<input type="password" id="readonly-Password-field" readonly="readOnly" value="secret" />
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Read Only Numbers fields</legend>
		<ol>
			<li>
				<label for="readonly-tel-field">Telephone Field</label>
				<input type="tel" id="readonly-tel-field" readonly="readOnly" value="999999999"/>
			</li>
			<li>
				<label for="readonly-text-field22">Number Field</label>
				<span>$</span>
				<input type="number" id="readonly-text-field22" readonly="readOnly" value="0" min="0.15" />
				<span>/ month</span>
			</li>
			<li>
				<label for="readonly-text-field23">Number Field</label>
				<span>$</span>
				<input type="number" id="readonly-text-field23" readonly="readOnly" value="0" min="0.15" max="100" />
				<span>/ click</span>
				<span class="explain">min="0.15" max="100"</span>
			</li>
			<li>
				<label for="readonly-date-field">Date Field</label>
				<input type="date" id="readonly-date-field" readonly="readOnly"/>
			</li>

			<li>
				<label for="readonly-datetime-local">datetime-local</label>
				<input type="datetime-local" id="readonly-datetime-local" readonly="readOnly" />
			</li>
			<li>
				<label for="readonly-month">month</label>
				<input type="month" id="readonly-month" readonly="readOnly" />
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Read Only textarea</legend>
		<ol>
			<li>
				<label for="readonly-text-area">Textarea</label>
				<textarea id="readonly-text-area" readonly="readOnly">Some text</textarea>
			</li>
		</ol>
	</fieldset>
	<button type="submit" class="button-primary">Continue</button>
</form>