HTML

ボタンの配置、サイズ変更

更新日:

ボタンの配置方法です。
submitボタン、スタイルシートでボタンのサイズ変更、一般的なボタンや
Javaスクリプトでのリンク方法などを紹介しています。

submitボタン

CGIなどのプログラムを作るときによく使われるボタンです。
<FORM></FROM>などで囲んで入力された値などを受け取れるようにします。

構文

<INPUT type="submit" name="ボタン名" value="表示したい文字">

使用例

<INPUT type="submit" name="botan1" value="送信">

一般的なボタン

ボタンには基本的にリンクを付けられないので、Javaスクリプトなどと一緒に使う場合が多いです。

構文

<INPUT type="button" name="ボタン名" value="表示したい文字">

使用例

<INPUT type="button" name="botan2" value="送信">

Javaスクリプトを使用してリンクを付けた例です。

使用例

<INPUT type="button" name="botan3" value="TOPへ" language="javascript" onclick="self.location.href='https://sasukepg.jp/'">

スタイルシートでボタンのサイズを変える

<INPUT type="button">のタグではサイズの変更は出来ません。
そのためスタイルシートでサイズを指定します。

構文

<INPUT type="button" value="表示したい文字" name="ボタン名"
style="WIDTH: 横の幅px; HEIGHT: 縦の幅px">

使用例

<INPUT type="Button" value="送信" name="botan4" style="WIDTH: 400px; HEIGHT: 20px">

  • この記事を書いた人
さすけ

さすけ

インフラエンジニアとして数々の大手サーバーを構築を実施し、現在はWebサーバーの構築、サイト作成を中心に活躍しています。

-HTML
-

Copyright© さすけのプログラミング入門 , 2018 All Rights Reserved.