フォームの要素を取得する - JavaScriptのチュートリアル

このレッスンでは、 フォーム内の要素をid属性は使わずに 取得してみます。 まず、今開いてるドキュメントは、 すでにフォームが設定されています。 まずここはスタイルなんですけれども、 簡単な位置合わせですね。 margin とか line-height などが 設定されていますが、 ここはあまり重要じゃないので head ごと畳んでしまいましょう。 さて、下にフォームがありますけれども、 body要素内ですね。 フォーム内の要素には、 h3要素でタイトルが付けられています。 まずは text とありますが、 これはinput要素で、 type が text ですね。 radio はinput要素で、 type が radio ということになっています。 checkbox は、 やはりinput要素で type が checkbox、 select は、select要素です。 そして、中にオプションで selection 1、2、3とありますね。 それから、textArea。 これは文字どおり textArea の要素。 あとは button がありまして、 input要素で type=button ということになっています。 現在のフォームの見栄えを確認しましょう。 こんな感じですね。 設定も簡単に確かめますけれども、 「text」には「hello, JavaScript form!」 となっています。 「radio」ボタンは 「item 1」が選択されていて、 「checkbox」は「check A」に チェックが付いています。 「select」は 1、2、3のうち、先頭が選ばれています。 「textArea」には 「write some text here」とあって、 「button」には「button」と 名前が表示されています。 今度はコードの方で 値の確認、設定の確認をしましょう。 text の方は value に hello, JavaScript form! と ありますね。 それからradioボタンについては、 先頭の item 1 に checked という属性があります。 checkbox は、 check A の方に checked とあって、 check B にはこれがないので、 オープンになってますね。 select…