ほんっとにはじめての HTML5 と CSS3
サンプル1、2 では、の中か、ボタン部品の中で、計算式を作っています。 で、要素の中で作れないかと探したら、1つ onforminputイベントハンドラを使う方法はあったのですが、この forminputイベントとformchangeイベントは、もう廃止されたんだそうです。 （なので今はOperaくらいしかプレビューしません） ↓ こちらの4項に廃止の件が書かれています。（2011年の4月までには廃止されたようです） W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
id属性・for属性を使って出力する方法もあります
数値のフォーム部品（ここでは）にid属性で名前をつけ、 のfor属性で関連づけます。for属性は出力元のフォーム部品を明確に示すためのものです。
●サンプル3 まずは、要素の oninputイベント で、数字の入力と同時に計算結果を出します。
の oninputイベントで、id属性を使って各要素のvalue値を呼び出して計算し、の値として返しています。 のfor属性は「半角スペース」で区切って複数指定できます。●サンプル4 id属性を使って、ボタンの要素のonclickイベント で、計算結果を出すサンプルです。
の onclickイベントで、id属性を使って各要素のvalue値を呼び出して計算し、の値として返しています。 のfor属性は「半角スペース」で区切って複数指定できます。
もうちょっと実用性のある計算を
税ぬき価格 × 消費税額 ％ = 税込み価格：¥0計算式を変えただけです。Math.round() は Math.round関数といって小数点以下を四捨五入します。この「( )」の中で、税抜き価格（ prc ）に消費税率（ tax 割る100）を掛けて、最後に税抜き価格を足しています。 Math.round関数で端数を四捨五入した値を に（ incl ）返しています。 ちなみに、 小数点以下を切り上げたい場合は、Math.ceil() を、 小数点以下を切り捨てたい場合は、Math.floor() を使います。
オリジナルハガキ（1枚118円） ＊100, 200, 500, 1000枚のいずれかをお選びください ご注文枚数： 枚 = 合計金額：¥0レンジと組み合わせる
評価（1〜10）： 6サンプル1 と同じように、それぞれの部品にname属性で名前を付けて値を呼び出しています。の oninputイベントで、レンジの入力結果をの値として返しています。アンケートとかに使えそうですね。
テキストも入力結果を表示できる
W3Cは「. represents the result of a calculation（計算結果を表示する）」と言っているので、邪道かも？ですが、とにかくブラウザがプレビューします（笑）。
function welcome(ctrl)いらっしゃいませ
ここではまず、JavaScriptで welcome(ctrl) という任意の関数を作っています。 この中で、id名（ hello ）を付けたの、value値が置き換えられるように指定します。 の中では、テキスト入力部品の要素にname属性で名前（ yourName ）をつけておき、ボタン部品の onclick で、 welcome ( yourName ) と関数を呼び出して、のvalue値を yourName に置き換えています。
次回は要素です。これもHTML5からできた新しい要素です。 要素は、特定の範囲内でどの位置（分量）かを表示するための要素です。 範囲の中を「低・中・高」と分けたり「最適」な範囲を決めて表示します。
- （ちょっとメモ）属性の「引用符」や「値」の省略について
- （ちょっとメモ）HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう（CSS使用）
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素（HTML5.2で削除されました）
- [57] プログレスバー（進捗状況）を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
- [55] 計算結果の出力欄を作ろう output要素
- [54] ラベルを付けて使いやすくしよう label要素
- [53] 文章 (複数行のテキスト) を入力してもらおう textarea要素
- [52] 入力候補のリストを作ろう datalist要素
- [51] セレクトメニューを作ろう（select・option・optgroup要素）
- （ちょっとメモ）整理しよう。フォームのボタン比較
- [50] button要素で送信・リセット・汎用ボタンを自由に作ろう
- [49-11] input要素で画像の送信ボタンを作ろう (image)
やる気を保つためにランキングに参加しています。 応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。 自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。 私が使っているのは、 スターサーバー や ロリポップ！ です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。 初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ や、エックスサーバー は、やはり老舗なのでおすすめです。 両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
- 最終更新日：2018-03-30（Fri）│
- 投稿日：2013-10-15（Tue）│
- カテゴリ：はじめてのHTML
一つ質問させてください。 読者に文字列を選択してもらって、それを数値として認識し、 計算結果として出力することは可能なのでしょうか？
- 2016-05-11 20:38 :
- はいつ
はいつさん もちろん可能でしょうねぇ。 計算式は JavaScript で記述します。 要素はその結果を表示するための要素です。
- 2016-06-03 16:04 :
- yuki★hata
- 【66-2】ユーザーアクション擬似クラス :active :hover (12/20)
- 【66-1】ロケーション擬似クラス :target :target-within :local-link (09/20)
- 【66-1】ロケーション擬似クラス :link :visited :any-link (08/15)
- 【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴） (06/21)
- （ちょっとメモ）名前空間（ネームスペース）とCSSセレクター (05/19)
- 【65-3】クラスセレクター（.）と IDセレクター（#） (04/18)
- 【65-3】属性セレクター [att="val" i] [att="val" s] (03/16)
- 【65-3】属性セレクター [att^="val"] [att$="val"] [att*="val"] (02/15)
- WHATWG - HTML Living Standard（2021年1月28日以降のHTMLの正式仕様）
- HTML 5.2 - W3C（2017年12月14日勧告→2021年1月28日廃止）
- Index of CSS properties - W3C（CSSプロパティリストから仕様ページに飛べます）
- Can I use. （HTML5とCSS3のブラウザ対応状況を調べられます）
- StatCounter（ブラウザのバージョン別シェアを調べられます）
- Markup Validation Service（ソースをバリデート（検証）できます）
- Simple Media Queries Tester（PCブラウザで メディアクエリのテストができる）
- 原色大辞典（色名とカラーコードがひと目でわかるWEB色見本）
- HSL Color Picker（16進数・rgba・hsla の互換ツール）
- Ultimate CSS Gradient Generator（グラデーションの CSSを作ってくれる）
- uiGradients（グラデーション見本）
- Favicon & App Icon Generator（画像からファビコンを作成）
- ＊Web Design 覚え書き＊
- 超初心者のサーバ移転とドメイン移管_ついでにWordPressも設置してみた♪
Author : yuki★hata せめて月1回の更新をめざします～。