Pattern Library by Cloudy knot

Input Field 

<main class="main-wrapper">
    <form name="input-sample" method="post" action="">
        <fieldset>
            <legend class="heading2">Type Text</legend>
            <div class="input-text-container">
                <label for="name" class="input-text-label">お名前 ：</label>
                <input type="text" id="name" name="name" placeholder="姓 名" maxlength="50" required class="input-text">
            </div>
        </fieldset>
        <div class="divider my32" role="separator"></div>
        <fieldset>
            <legend class="heading2">Type Email</legend>
            <div class="input-text-container">
                <label for="email" class="input-text-label">Emailアドレス ：</label>
                <input type="email" id="email" name="email" pattern=".{1,}@.*" placeholder="xxxx@xxx.com（.co.jpなど）" maxlength="50" required class="input-text">
            </div>
        </fieldset>
        <div class="divider my32" role="separator"></div>
        <fieldset>
            <legend class="heading2">Type Password</legend>
            <div class="input-text-container">
                <label for="password" class="input-text-label">パスワード1 ：</label>
                <input type="password" id="password" class="js-display-pass input-text" name="password" placeholder="英数字8文字以上" required autocomplete>
                <label class="password-toggle">
                    <input type="checkbox" id="js-show-pass"> パスワードを表示する
                </label>
                <div class="divider my32" role="separator"></div>
                <div class="input-password-wrapper">
                    <label for="js-input" class="input-text-label">パスワード2 ：</label>
                    <input type="password" id="js-input" class="input-text" name="password" placeholder="英数字8文字以上" required autocomplete><button type="button" id="js-reveal-btn" class="password-toggle -button" aria-pressed="false">パスワードを表示する</button>
                </div>
            </div>
        </fieldset>
        <div class="divider my32" role="separator"></div>
        <fieldset>
            <legend class="heading2">Textarea</legend>
            <div class="input-text-container">
                <label for="textarea" class="textarea-label">問い合わせ内容 ：</label>
                <textarea id="textarea" name="message" placeholder="内容をご記入ください" required class="textarea"></textarea>
            </div>
        </fieldset>
    </form>
</main>
 
<main class="main-wrapper">
  <form name="input-sample" method="post" action="">
    <fieldset>
      <legend class="heading2">Type Text</legend>
      <div class="input-text-container">
        <label for="name" class="input-text-label">お名前 ：</label>
        <input type="text" id="name" name="name" placeholder="姓 名" maxlength="50" required class="input-text">
      </div>
    </fieldset>
    <div class="divider my32" role="separator"></div>
    <fieldset>
      <legend class="heading2">Type Email</legend>
      <div class="input-text-container">
        <label for="email" class="input-text-label">Emailアドレス ：</label>
        <input type="email" id="email" name="email" pattern=".{1,}@.*" placeholder="xxxx@xxx.com（.co.jpなど）" maxlength="50" required class="input-text">
      </div>
    </fieldset>
    <div class="divider my32" role="separator"></div>
    <fieldset>
      <legend class="heading2">Type Password</legend>
      <div class="input-text-container">
        <label for="password" class="input-text-label">パスワード1 ：</label>
        {{!-- チェックボックス式パスワード表示/非表示切り替え --}}
        <input type="password" id="password" class="js-display-pass input-text" name="password" placeholder="英数字8文字以上" required autocomplete>
        <label class="password-toggle">
          <input type="checkbox" id="js-show-pass"> パスワードを表示する
        </label>
        <div class="divider my32" role="separator"></div>
        {{!-- ボタン式パスワード表示/非表示切り替え --}}
        <div class="input-password-wrapper">
          <label for="js-input" class="input-text-label">パスワード2 ：</label>
          <input type="password" id="js-input" class="input-text" name="password" placeholder="英数字8文字以上" required autocomplete><button type="button" id="js-reveal-btn" class="password-toggle -button" aria-pressed="false">パスワードを表示する</button>
        </div>
      </div>
    </fieldset>
    <div class="divider my32" role="separator"></div>
    <fieldset>
      <legend class="heading2">Textarea</legend>
      <div class="input-text-container">
        <label for="textarea" class="textarea-label">問い合わせ内容 ：</label>
        <textarea id="textarea" name="message" placeholder="内容をご記入ください" required class="textarea"></textarea>
      </div>
    </fieldset>
  </form>
</main>
 
/* No context defined. */
  • Content: 
    /* /js/modules/PasswordReveal.js */

/**
 * PasswordReveal class - 2type
 */
export class PasswordRevealCheckbox {
  constructor(password, showPassword) {
    this.password = document.querySelector(password);
    this.showPassword = document.getElementById(showPassword);
    if(this.password != null) {
      this.showPassword.addEventListener('change',this.onShowPassword.bind(this), true);
    }
  }

  onShowPassword() {
    const type = this.showPassword.checked ? 'text' : 'password';
    this.password.setAttribute('type', type);
  }
}

export class PasswordRevealButton {
  constructor(input, button) {
    this.input = document.getElementById(input);
    this.button = document.getElementById(button);
    if(this.input != null) {
      this.button.addEventListener('click', this.onButtonClick.bind(this), false);
    }
  }

  onButtonClick() {
    if(this.input.type === 'password') {
      this.input.type = 'text';
      this.button.innerText = 'パスワードを隠す';
      this.button.setAttribute('aria-pressed', 'true');
    } else{
      this.input.type = 'password';
      this.button.innerText = 'パスワードを表示する';
      this.button.setAttribute('aria-pressed', 'false');
    }
  }
}

/* /js/main.js */

const passwordRevealCheckbox = new PasswordRevealCheckbox('.js-display-pass', 'js-show-pass');

const passwordRevealBottun = new PasswordRevealButton('js-input', 'js-reveal-btn');
  • URL: /components/raw/input-field/index.js
  • Filesystem Path: src/components/3-form-ui/input-field/index.js
  • Size: 1.4 KB
  • Content: 
    .input-text-container {
  width: 75%;
  margin: auto;
  box-sizing: border-box;
}
.input-text-container .password-toggle {
  margin-top: .5rem;
  cursor: pointer;
}
@media print, screen and (min-width:64.0625em) {
  .input-text-container .password-toggle {
    margin-left: 24.5%;
  }
}
.input-text-container .password-toggle [type="checkbox"] {
  cursor: inherit;
}
@media print, screen and (max-width:64em) {
  .input-text-container .password-toggle.-button {
    width: 25%;
    height: 100%;
    min-height: 50px;
    padding: .1rem;
    vertical-align: top;
  }
}
@media print, screen and (max-width:47.96875em) {
  .input-text-container .password-toggle.-button {
    font-size: calc(var(--font-size-s2));
  }
}

.input-text-label {
  width: 24%;
}
@media print, screen and (min-width:64.0625em) {
  .input-text-label {
    display: inline-block;
    font-size: calc(var(--font-size-m2));
  }
}
@media print, screen and (max-width:64em) {
  .input-text-label {
    display: block;
    width: 100%;
    margin-bottom: .7rem;
  }
}

.input-text {
  display: inline-block;
  margin: auto;
  border: 1px solid #333;
  line-height: 1.5;
  box-shadow: 1px 1px 2px 1px hsla(0, 0%, 0%, .15) inset;
}
@media print, screen and (min-width:64.0625em) {
  .input-text {
    width: 75%;
    padding: .65rem 1rem;
    font-size: calc(var(--font-size-m2));
  }
}
@media print, screen and (max-width:64em) {
  .input-text {
    width: 100%;
    padding: .75rem .9rem;
    font-size: calc(var(--font-size-m1) - .1rem);
  }
}
.input-text:focus {
  border-width: 2px;
  box-shadow: 2px 2px 4px 2px hsla(0, 0%, 0%, .15) inset;
}
@media print, screen and (min-width:64.0625em) {
  .input-text:focus {
    padding: calc(.65rem - 1px) calc(1rem - 1px);
  }
}
@media print, screen and (max-width:64em) {
  .input-text:focus {
    padding: calc(.75rem - 1px) calc(.9rem - 1px);
  }
}

.textarea-label {
  vertical-align: top;
}
@media print, screen and (min-width:64.0625em) {
  .textarea-label {
    width: 24%;
    margin-top: .625rem;
    font-size: calc(var(--font-size-m2));
  }
}
@media print, screen and (max-width:64em) {
  .textarea-label {
    width: 100%;
  }
}

.textarea {
  display: inline-block;
  margin: auto;
  border: 1px solid #333;
  line-height: 1.5;
  box-shadow: 1px 1px 2px 1px hsla(0, 0%, 0%, .15) inset;
  resize: vertical;
}
@media print, screen and (min-width:64.0625em) {
  .textarea {
    width: 75%;
    height: 200px;
    padding: 1.2rem 1rem;
    font-size: calc(var(--font-size-m2));
  }
}
@media print, screen and (max-width:64em) {
  .textarea {
    width: 100%;
    height: 170px;
    padding: .8rem;
    font-size: calc(var(--font-size-m1) - .1rem);
  }
}
.textarea:focus {
  border-width: 2px;
  box-shadow: 2px 2px 4px 2px hsla(0, 0%, 0%, .15) inset;
}
@media print, screen and (min-width:64.0625em) {
  .textarea:focus {
    padding: calc(1.2rem - 1px) calc(1rem - 1px);
  }
}
@media print, screen and (max-width:64em) {
  .textarea:focus {
    padding: calc(.8rem - 1px);
  }
}

input[type="password"]::-ms-reveal {
  display: none;
}

@media print, screen and (min-width:64.0625em) {
  .input-password-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
.input-password-wrapper .password-toggle {
  min-width: 21%;
  margin: 0;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

@media print, screen and (min-width:64.0625em) {
  [for="js-input"] {
    margin-top: .8rem;
  }
}

#js-input.input-text {
  min-height: 50px;
  margin: 0;
}
@media print, screen and (min-width:64.0625em) {
  #js-input.input-text {
    width: 55%;
  }
}
@media print, screen and (max-width:64em) {
  #js-input.input-text {
    width: 75%;
  }
}
  • URL: /components/raw/input-field/style.css
  • Filesystem Path: src/components/3-form-ui/input-field/style.css
  • Size: 3.7 KB

No notes defined.