フォームテンプレート

2020年10月24日 23:06

<!--HTML-->
<head>
<title>お問い合わせフォームを作る</title>
</head>
<body>
<form action="program.php method="post">
<dl>
    <dt>お問い合わせの種別</dt>
    <dd>
        <label><input type="chckbox" name="category" value="お問い合わせ”>お問い合わせ</label>
        <label><input type="chckbox" name="category" value="新規お申し込み”>新規お申し込み</label>
        <label><input type="chckbox" name="category" value="資料請求”>資料請求</label>
    </dd>
    <dt>お名前<span class="must">※</span></dt>
    <dd>
        <input type="text" name="name" required placeholder="田中太郎">
    </dd>
    <dt>ふりがな<span class="must">※</span></dt>
    <dd>
        <input type="text" name="kana" required placeholder="たなか　たろう">
    <dt>メールアドレス<span class="must">※</span></dt>
        <input type="email" name="email" required placeholder="sample@test.com">
    </dt>
    <dt>性別</dt>
    <dd>
        <label><input type="radio" name="gender" value="男">男</label>
        <label><input type="radio" name="gender" value="女">女</label>
    </dd>
    <dt>どこでお知りになりましたか？</dt>
    <dd>
        <select name="how">
            <option value="チラシ・DM">チラシ・DM</option>
            <option value="知り合いからの紹介"> 知り合いからの紹介</option>
            <option value="その他">その他</option>
        </select> 
    </dd>
</dl>  
</body>

/*CSS*/
@charaset "UTF-8";
dl{
    width;990px;
    border-top:1px solid #cccccc;
    border-right:1px solid #cccccc;
    border-left:1px solid #cccccc;
}

dl dt{
    float:left;
    padding:1em
    color:#998484;
}

dl dd{
    border-bottom:1px solid #cccccc;
    margin:0;
    padding:1em 0 1em 18em;
}

dl dt.must{
    color:#d23939
}

input[type="email"]{
    wodth:50%
}

input{
    font-size:1em;
    padding:5px;
}

label{
    margin-right:1em;
}

select{
    font-size:1em;
}

textarea{
    width:30em;
    font-size:1 em;
    padding:5px;
}

p.submit{
    text-align:center
}

input[type="submit"]{
    padding:20 100px;
    background:#7f6666;
    color:#ffffff;
    font-weight:bold;
    border-radius:10px;
    cursor:pointer;
}
input[type="submit"]:hover{
    opacity:0.8;
}

この記事が気に入ったらサポートをしてみませんか？