<div class="form-item">
<label for="edit-name" class="form-item__label form-item__label--required form-item__label--textfield" id="name">Name</label>
<input autocorrect="none" autocapitalize="none" spellcheck="false" aria-describedby="edit-name--description" type="text" name="name" value="" size="60" maxlength="60" class="form-item__textfield form-item__textfield--required" required="required" aria-required="true" aria-labelledby="name" placeholder="First, Middle, Last">
</div>
<div class="form-item">
<label for="edit-pass" class="form-item__label form-item__label--required form-item__label--textfield" id="password">Password</label>
<input aria-describedby="edit-pass--description" type="password" name="pass" size="60" maxlength="128" class="form-item__textfield form-item__textfield--password form-item__textfield--required" required="required" aria-required="true" aria-labelledby="password">
<div class="form-item__description">
Enter the password that accompanies your username.
</div>
</div>
<form>
<fieldset class="form-fieldset">
<legend class="heading-2 with-icon">Web and Email Address (fieldset example)</legend>
<div class="form-item">
<label for="webaddress" class="form-item__label form-item__label--textfield">Web Address</label>
<input type="url" class="form-item__textfield" placeholder="http://yoursite.com">
</div>
<div class="form-item">
<label for="emailaddress" class="form-item__label form-item__label--textfield">Email Address</label>
<input type="email" class="form-item__textfield" placeholder="name@email.com">
</div>
</fieldset>
</form>
<div class="form-item">
<label for="text" class="form-item__label form-item__label--textfield">Number Input</label>
<input type="number" class="form-item__textfield" placeholder="Enter a Number" pattern="[0-9]*">
</div>
<div class="form-item">
<label for="textarea" class="form-item__label form-item__label--textfield">Textarea</label>
<textarea class="form-item__textfield form-item__textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</div>
<div class="form-item">
<label for="edit-name" class="form-item__label form-item__label--required form-item__label--textfield" id="name">Name</label>
<input autocorrect="none" autocapitalize="none" spellcheck="false" aria-describedby="edit-name--description" type="text" name="name" value="" size="60" maxlength="60" class="form-item__textfield form-item__textfield--required" required="required" aria-required="true" aria-labelledby="name" placeholder="First, Middle, Last">
</div>
<div class="form-item">
<label for="edit-pass" class="form-item__label form-item__label--required form-item__label--textfield" id="password">Password</label>
<input aria-describedby="edit-pass--description" type="password" name="pass" size="60" maxlength="128" class="form-item__textfield form-item__textfield--password form-item__textfield--required" required="required" aria-required="true" aria-labelledby="password">
<div class="form-item__description">
Enter the password that accompanies your username.
</div>
</div>
<form>
<fieldset class="form-fieldset">
<legend class="heading-2 with-icon">Web and Email Address (fieldset example)</legend>
<div class="form-item">
<label for="webaddress" class="form-item__label form-item__label--textfield">Web Address</label>
<input type="url" class="form-item__textfield" placeholder="http://yoursite.com">
</div>
<div class="form-item">
<label for="emailaddress" class="form-item__label form-item__label--textfield">Email Address</label>
<input type="email" class="form-item__textfield" placeholder="name@email.com">
</div>
</fieldset>
</form>
<div class="form-item">
<label for="text" class="form-item__label form-item__label--textfield">Number Input</label>
<input type="number" class="form-item__textfield" placeholder="Enter a Number" pattern="[0-9]*">
</div>
<div class="form-item">
<label for="textarea" class="form-item__label form-item__label--textfield">Textarea</label>
<textarea class="form-item__textfield form-item__textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</div>
{
"legend": "This is the legend",
"list_items": {
"1": {
"key": 1,
"item": "Option 1"
},
"2": {
"key": 2,
"checked": "checked",
"item": "Option 2"
},
"3": {
"key": 3,
"item": "Option 3"
},
"4": {
"key": 4,
"checked": "checked",
"item": "Option 4"
}
}
}
.checkbox-list,
.radiobutton-list{
@include reset-list-nav;
}
.form-item {
margin: $spacer 0;
// &:first-of-type {
// margin: 0 0 $spacer 0;
// }
// &:last-of-type {
// margin: $spacer 0 0 0;
// }
}
.form-item__select,
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=number],
textarea {
font-size: 1rem;
}
.search-name {
position: relative;
.search-name-box {
min-width: 300px;
background: transparent url(../images/search-icon.jpg) no-repeat 98% center;
background-size: 25px auto;
height: 30px;
.color-scheme-dark & {
color: $white;
}
}
#search-name-submit {
-webkit-appearance: none;
box-sizing: inherit;
padding: 0;
border-width: 0;
border-style: none;
border-color: inherit;
border-image: none;
color: transparent;
position: absolute;
left: 250px;
top: 1px;
width: 55px;
height: 30px;
background-color: transparent;
}
}
form {
.hidden {
visibility: hidden;
}
}
.form-login {
.color-scheme-dark & {
background-color: $dark_mode_grey !important;
}
}
.webform-scale {
.form-type-radio {
border-top: 0;
&:last-of-type {
border-bottom: 0;
padding: 0 !important;
}
}
}
.webform-button--submit {
margin: $spacer 0 0 0;
}
.draggable {
a {
&.tabledrag-handle {
border-bottom: none;
.handle {
width: 25px;
height: 25px;
}
}
}
}
.custom-range {
height: unset;
}
.form-type-range {
.form-type-number {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
}
.form-wrapper {
summary {
&::before {
content: unset;
}
}
}
Show what the form will look like.