Form

Standard

HTML

<form action="/">
    <div class="form-control">
        <input type="text" name="name" placeholder="名前" required>
    </div>
    <div class="form-control">
        <input type="email" name="email" placeholder="メール" required>
    </div>
    <div class="form-control">
        <input type="password" name="password" placeholder="パスワード" required>
    </div>
    <div class="flex flex-left">
        <button class="btn btn-primary btn-large">送信</button>
        <button class="btn btn-gray btn-large m-1">キャンセル</button>
        <button class="btn btn-red btn-large">削除</button>
    </div>
</form>

Fields with Label

HTML

<form action="/">
    <div class="form-control">
        <label for="name">名前</label>
        <input type="text" name="name" required>
    </div>
    <div class="form-control">
        <label for="email">メール</label>
        <input type="email" name="email" required>
    </div>
    <div class="form-control">
        <label for="password">パスワード</label>
        <input type="password" name="password" required>
    </div>
    <div class="flex flex-right">
        <button class="btn btn-primary btn-large"><i class="fas fa-arrow-right"></i>送信</button>
        <button class="btn btn-gray btn-large m-1"><i class="fas fa-times"></i>キャンセル</button>
        <button class="btn btn-red btn-large"><i class="fas fa-trash"></i>削除</button>
    </div>
</form>