https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

ボタンや入力欄のサイズを変える

{width:値;}、{height:値;}でフォームボタンや入力欄のサイズを指定する ことができます。

【ブラウザ表示】


ソース

<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" class="sample1" value="テキストフィールド">
</div>
<p>
<select name="se1" class="sample2">
<option value="動物1">犬</option>
<option value="動物2">猫</option>
</select>
</p>
<p>
<textarea name="area1" class="sample3" cols="40" rows="8">
テキストエリア
</textarea>
</p>
<p>
<input type="submit" value="送信" class="sample4">
</p>
</form>

外部ファイル

input.sample1{
width:100px;
height:30px;
}
select.sample2{
width:80px;
height:20px;
}
textarea.sample3{
width:200px;
height:100px;
}
input.sample4{
width:40px;
height:30px;
}


<body>~</body>に直接記入する場合

<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" style="width:100px; height:30px;" value="テキストフィールド">
</div>
<p>
<select name="se1" style="width:80px; height:20px;">
<option value="動物1">犬</option>
<option value="動物2">猫</option>
</select>
</p>
<p>
<textarea name="area1" style="width:200px; height:100px;" cols="40" rows="8">
テキストエリア
</textarea>
</p>
<p>
<input type="submit" value="送信" style="width:40px; height:30px;">
</p>
</form>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

文字のサイズや色を変える
枠線の太さ、色、種類を指定する
背景色や画像を指定する
外側、部品の余白を指定する
フォームを並べる
入力欄の入力モードを変更する
フォームの部品の色を変える

スタイルシート一覧のページに戻る