スポンサーリンク

フォームのテキストボックスを作成

空のテキストボックス

空のテキストボックスです。
inputタグで簡単に作れます。あとでテキストボックスやボタンを追加するので、formタグでくくっておきます。


スポンサーリンク

テキストボックスのセンタリング

divタグでくくり、class="al-c"とすることで、フォーム全体をセンタリングできます。


デフォルトで文字列を入力

inputタグのvalue属性に文字列をセットすることで、デフォルトで文字列を入力できます。


縦横の幅を指定

inputタグにstyle属性を追加して、width, heightを指定します。
下記は、width:400px;height:30pxとしました。


スポンサーリンク

テキストボックスの値を取得

ボタンを作成

inputタグので、type="button"とすることでボタンを作成できます。



ボタンクリックでテキストボックスの中身を表示

いよいよ、JavaScriptです。
scriptタグでくくって、functionを定義します。
下記は、上(name="textBox_002")のテキストボックスの文字列を、下(name="textBox_003")のテキストボックスに表示します。

ボタンクリック時に、clickButton_001()が実行されるようにします。
ボタンのonclick属性にclickButton_001()を設定します。



数値をテキストボックスで扱う

type="number"にして、テキストボックスを作成します。
数値のみ入力可能となり、入力された値を数値として扱えます。




テキストボックスの値をクリア

新たにリセットボタンを追加します。

JavaScriptでテキストボックスの値をリセットする関数を書きます。

リセットボタンをクリックしたら、値をリセットする関数が呼ばれるようにします。





スポンサーリンク