Untitled

dabblet.css

body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	background: white;
	color: #333;
	font-size: 16px;
	line-height: 1.2;
}

h1 {
	text-align: center;
}

form {
	width: 500px;
	margin: 0 auto;
}

legend {
	font-weight: bold;
	font-size: 120%;
}

small {
	font-size: 70%;
}

fieldset > div {
	margin: 10px 0;
}

fieldset > div > label {
	display: inline-block;
	min-width: 100px;
	vertical-align: top;
	line-height: 27px;
}

input, textarea {
	border: 1px solid #cecece;
	padding: 5px 10px;
	font-size: .8rem;
}

label.inline {
	font-size: .8rem;
}

.mb-5 {
	margin-bottom: 5px;
}

.inline-block {
	display: inline-block;
}

dabblet.html

<h1>Sign Up</h1>

<form action="/sign-up" method="POST">
  <fieldset>
    <legend>Account Details</legend>
    <div>
      <label for="email">Email</label>
      <input
        id="email"
        type="email"
        name="email"
        value=""
        placeholder="Email"
      />
    </div>
    <div>
      <label for="password">Password</label>
      <input
        id="password"
        type="password"
        name="password"
        value=""
        placeholder="Password"
      />
    </div>
  </fieldset>

  <br />

  <fieldset>
    <legend>Personal Details</legend>
    <div>
      <label for="name">Name</label>
      <input
        id="name"
        type="text"
        name="name"
        value=""
        placeholder="Full name"
      />
    </div>
    <div>
      <label for="tel">Telephone</label>
      <input
        id="tel"
        type="tel"
        name="tel"
        value=""
        placeholder="Phone number"
      />
      <small>Format: 123-456-7890</small>
    </div>
    <div>
      <label class="mb-5">Gender</label>
      <div class="inline-block">
        <input type="radio" id="male" name="gender" value="male" />
        <label class="inline" for="male">Male</label>
      </div>
      <div class="inline-block">
        <input type="radio" id="female" name="gender" value="female" />
        <label class="inline" for="female">Female</label>
      </div>
      <div class="inline-block">
        <input type="radio" id="other" name="gender" value="other" />
        <label class="inline" for="other">Other</label>
      </div>
    </div>
    <div>
      <label for="story">Your story</label>
      <textarea
        id="story"
        class="inline-block"
        name="story"
        rows="5"
        cols="33"
        placeholder="Please tell us your story"
      ></textarea>
    </div>
  </fieldset>

  <br />

  <fieldset>
    <legend>Address</legend>
    <div>
      <label for="street">Street</label>
      <input
        id="street"
        type="text"
        name="street"
        value=""
        placeholder="Street"
      />
    </div>
    <div>
      <label for="city">City</label>
      <input id="city" type="text" name="city" value="" placeholder="City" />
    </div>
    <div>
      <label for="country">Country</label>
      <select id="country" name="country">
        <option value="">Please select</option>
        <option value="nz">New Zealand</option>
        <option value="au">Australia</option>
        <option value="cn">China</option>
        <option value="us">USA</option>
      </select>
    </div>
  </fieldset>

  <br />

  <div>
    <input type="checkbox" id="tnc" name="tnc" value="tnc" />
    <label class="inline" for="tnc"
      >I agree the <a href="#">terms and conditions</a></label
    >
  </div>

  <br />

  <div>
    <button class="inline-block" type="submit">Submit</button>
    <button class="inline-block" type="reset">Reset</button>
  </div>
</form>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}