Form

A form with visual consistency helps users understand the positions of text input or selection fields.
Compose the entire form in a consistent way by referring to Click to Buy guidelines.

Form

Refers to an input form that should be entered by the user. A form can be created by combining several text inputs and components.

The size of form elements differs depending on the default form size used and may be adjusted according to the width.

The field provides a hint (placeholder) for the content that should be entered by the user, and visual feedback according to the user status (Active, Normal, Disable, Error, Success).

ABasic

Normal

Error: The password does not match.

Success: The password matches.

Mix

Select

BHalf Type

Required Fields required

Error: Error message.

Success: Success message.

Normal: Normal message. Normal message. Normal message. Normal message. Normal message.Normal message.Normal message.

Mix

Error message.
Error message.

Please enter a valid email address. To activate your account, you must complete the email verification process.

Please enter ID and click ‘Check Availability button’.

Mix


<div class="frm_field">
	<dl class="frm">
		<dt><label for="frm0">Normal</label></dt>
		<dd>
			<input type="text" id="frm0">
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="frm1">Error</label></dt>
		<dd>
			<input type="text" id="frm1" class="warn"><i class="ic_error"></i>
			<p class="inp_txt warn">The password does not match.</p>
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="frm2">Success</label></dt>
		<dd>
			<input type="text" id="frm2">
			<p class="inp_txt succ">The password matches.</p>
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="frm3">Mix</label></dt>
		<dd class="_mix">
			<input type="text" id="frm3">
			<button class="btn-type _default">button</button>
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="select1">Select</label></dt>
		<dd>
			<select id="select1">
				<option>select box</option>
			</select>
		</dd>
		<dd class="col_n-2">
			<select>
				<option>select box</optiosn>
			</select>
			<select>
				<option>select box</option>
			</select>
		</dd>
		<dd class="col_n-3">
			<select>
				<option>select box</option>
			</select>
			<select>
				<option>select box</option>
			</select>
			<select>
				<option>select box</option>
			</select>
		</dd>
		<dd class="col_n-2">
			<input type="text">
			<input type="text">
		</dd>
		<dd class="col_n-3">
			<input type="text">
			<input type="text">
			<input type="text">
		</dd>
	</dl>
</div>

<div class="frm_field field_half">
	<dl class="frm">
		<dt><label for="frm10">Required Fields <span class="required"><span class="a11y">required</span></span></label></dt>
		<dd>
			<input type="text" id="frm10">
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="frm11">Error</label></dt>
		<dd>
			<input type="text" id="frm11" class="warn"><i class="ic_error"></i>
			<p class="inp_txt warn">Error message.</p>
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="frm12">Success</label></dt>
		<dd>
			<input type="text" id="frm12">
			<p class="inp_txt succ">Success message.</p>
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="frm13">Normal</label></dt>
		<dd>
			<input type="text" id="frm13">
			<p class="inp_txt">Normal message. Normal message. Normal message. Normal message. Normal message.Normal message.Normal message.</p>
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="frm14">Mix</label></dt>
		<dd class="_mix">
			<div class="masking">
				<input type="text" id="frm14" class="warn">
				<i class="ic_error"></i>
				<button class="btn-type _default">button</button>
				<button class="btn_masking"><i class="ic_show"></i></button>
			</div>
			<p class="inp_txt warn">Error message.<br>Error message.</p>
		</dd>
		<dd class="noti_txt">
			<p>Please enter a valid email address. To activate your account, you must complete the email verification process.</p>
			<p>Please enter ID and click  ‘Check Availability button’.</p>
		</dd>
	</dl>
	<dl class="frm">
		<dt><label for="">Mix</label></dt>
		<dd class="_mix">
			<select>
				<option>option</option>
			</select>
			<button class="btn-type _default">button</button>
		</dd>
	</dl>
</div>