No notes defined.
<section class="c-login js-login">
<header class="c-login__header">
<h2>New Account Sign Up</h2>
<p class="c-login__required-field js-login__required-field" hidden>required field</p>
</header>
<p role="alert" class="c-login__invalid-notification js-login__invalid-notification" hidden></p>
<form method="post" action="https://www.hashemian.com/tools/form-post-tester.php/dmptool123" class="novalidate">
{{> @datalist institution }}
{{> @textfield email }}
{{> @textfield firstname }}
{{> @textfield lastname }}
{{> @textfield institution }}
<div class="c-login__pseudo-description">
{{> @checkbox not_listed}}
</div>
{{> @textfield password }}
<div class="c-login__pseudo-description">
{{> @checkbox show_password}}
</div>
{{> @checkbox terms }}
{{> @button }}
<p>This will create a new account. If you already have an account, <a href="">go back</a> to try a different email address, or <a href="">contact us</a>.</p>
</form>
{{> @serial-nav }}
</section>
{
"textfield": {
"component_id": "login-email",
"input_id": "email_1",
"label": "Email address",
"type": "email",
"autocomplete": "email",
"required": true,
"general_description_id": "description_1",
"general_description": "For SSO, use institutional address."
},
"button": {
"type": "submit",
"text": "Sign Up"
},
"email": {
"textfield": {
"input_id": "email_5",
"label": "Email address",
"type": "email",
"name": "email",
"autocomplete": "email",
"readonly": true,
"value": "Lambert29@example.org"
}
},
"firstname": {
"textfield": {
"input_id": "first_1",
"label": "First name",
"type": "text",
"name": "firstname",
"autocomplete": "given-name",
"required": true
}
},
"lastname": {
"textfield": {
"input_id": "last_1",
"label": "Last name",
"type": "text",
"name": "lastname",
"autocomplete": "family-name",
"required": true
}
},
"institution": {
"datalist": {
"id": "the-datalist-id"
},
"textfield": {
"component_id": "js-inst-textfield",
"input_id": "inst_1",
"label": "Institution",
"type": "text",
"name": "institution",
"autocomplete": "off",
"list": "the-datalist-id",
"required": true
}
},
"not_listed": {
"checkbox": {
"component_id": "js-unlisted-checkbox",
"input_id": "listed_1",
"label": "My institution is not on the list",
"name": "unlisted",
"value": "true"
}
},
"password": {
"textfield": {
"component_id": "js-password-field",
"input_id": "pass_1",
"label": "Password",
"sublabel": "(at least 8 characters)",
"type": "password",
"name": "password",
"autocomplete": "password",
"minlength": 8,
"required": true
}
},
"show_password": {
"checkbox": {
"component_id": "js-password-toggle",
"input_id": "show_1",
"label": "Show password"
}
},
"terms": {
"checkbox": {
"input_id": "terms_1",
"label": "I accept the terms and conditions",
"name": "terms",
"value": "Terms and conditions accepted.",
"required": true
}
},
"serialnav": {
"label": "Go Back"
}
}
<section class="c-login js-login">
<header class="c-login__header">
<h2>New Account Sign Up</h2>
<p class="c-login__required-field js-login__required-field" hidden>required field</p>
</header>
<p role="alert" class="c-login__invalid-notification js-login__invalid-notification" hidden></p>
<form method="post" action="https://www.hashemian.com/tools/form-post-tester.php/dmptool123" class="novalidate">
<datalist id="the-datalist-id">
<option value="University of California, Berkeley"></option>
<option value="Harvard University"></option>
<option value="Stanford University"></option>
<option value="California State University, East Bay"></option>
<option value="Boston College"></option>
</datalist>
<div id="" class="c-textfield js-textfield ">
<label for="email_5">Email address </label>
<input id="email_5" type="email" name="email" autocomplete="email" value="Lambert29@example.org" list="" minlength="" maxlength="" class="readonly">
<div id="" class="c-textfield__invalid-description js-invalid-description" hidden></div>
</div>
<div id="" class="c-textfield js-textfield ">
<label for="first_1">First name </label>
<input id="first_1" type="text" name="firstname" autocomplete="given-name" value="" list="" minlength="" maxlength="" class="require-me">
<div id="" class="c-textfield__invalid-description js-invalid-description" hidden></div>
</div>
<div id="" class="c-textfield js-textfield ">
<label for="last_1">Last name </label>
<input id="last_1" type="text" name="lastname" autocomplete="family-name" value="" list="" minlength="" maxlength="" class="require-me">
<div id="" class="c-textfield__invalid-description js-invalid-description" hidden></div>
</div>
<div id="js-inst-textfield" class="c-textfield js-textfield ">
<label for="inst_1">Institution </label>
<input id="inst_1" type="text" name="institution" autocomplete="off" value="" list="the-datalist-id" minlength="" maxlength="" class="require-me">
<div id="" class="c-textfield__invalid-description js-invalid-description" hidden></div>
</div>
<div class="c-login__pseudo-description">
<div id="js-unlisted-checkbox" class="c-checkbox js-checkbox ">
<input id="listed_1" type="checkbox" name="unlisted" value="true" aria-describedby="
">
<label for="listed_1">My institution is not on the list</label>
<div id="" class="c-checkbox__invalid-description js-invalid-description" hidden></div>
</div>
</div>
<div id="js-password-field" class="c-textfield js-textfield ">
<label for="pass_1">Password <em>(at least 8 characters)</em></label>
<input id="pass_1" type="password" name="password" autocomplete="password" value="" list="" minlength="8" maxlength="" class="require-me">
<div id="" class="c-textfield__invalid-description js-invalid-description" hidden></div>
</div>
<div class="c-login__pseudo-description">
<div id="js-password-toggle" class="c-checkbox js-checkbox ">
<input id="show_1" type="checkbox" name="" value="" aria-describedby="
">
<label for="show_1">Show password</label>
<div id="" class="c-checkbox__invalid-description js-invalid-description" hidden></div>
</div>
</div>
<div id="" class="c-checkbox js-checkbox ">
<input id="terms_1" type="checkbox" name="terms" value="Terms and conditions accepted." aria-describedby="
" class="require-me">
<label for="terms_1">I accept the terms and conditions</label>
<div id="" class="c-checkbox__invalid-description js-invalid-description" hidden></div>
</div>
<button type="submit">Sign Up</button>
<p>This will create a new account. If you already have an account, <a href="">go back</a> to try a different email address, or <a href="">contact us</a>.</p>
</form>
<a class="c-serialnav" rel="prev" href="">Go Back</a>
</section>