追加ボタンをクリックするとラジオボタンが追加されます。取得をクリックするとラジオボタンの状態を取得します。
ディフォルドではラジオボタン全部が非選択状態になりますのでchecked属性を指定して平成にチェックを入れています。

追加ボタンをクリックするとセレクトボックスの選択肢を追加します。セレクトボックスで選択状態が変化すると現在選択されているアイテムが表示されます。

追加ボタンを0～9*#のボタンを追加します。追加したボタンをクリックするとボタン名を表示します。
ボタンはcreateElementで作成しています。ボタンにaddEventListenerでclickイベントを追加しています。
電話風に3個置きに改行を入れて横に3個ずつボタンを表示しています。
クリックするとイベントが発生しますので、event.targetによりイベントの発生元のオブジェクトを取得し、value属性よりボタン名を取り出して表示します。 ボタンの幅が不揃いにならないようにbtnクラスでボタンの幅を固定しています。

取得ボタンをクリックするとテキストボックスの内容を取得して表示します。
テキストボックスには数字を入力してください。

HTML5で追加されたスライダーのサンプルです。
操作時のスライダの値をリアルタイムに表示するためにイベントを使用しています。ブラウザによってイベントが異なるため、oninput、oncahgeの2つのイベントを使用しています。

HTML5で追加されたスライダーのサンプルです。
操作時のスライダの値をリアルタイムに表示するためにイベントを使用しています。ブラウザによってイベントが異なるため、oninput、oncahgeの2つのイベントを使用してテキストボックスを書き換えています。
テキストボックスの変更時もoninputイベントを使用して監視しスライダを変更します。無効な数字（テキストボックスが空の場合）が入力されているときにスライダーを修正するとディフォルト値になってしまう現象が発生したのでテキストボックスの値が非数の時はスライダーの値を変更しないようにしました。

HTML5で追加されたスライダーのサンプルです。
スライダに入力候補を4個作成して設定しています。ブラウザのディフォルトの目盛と区別できるように対数目盛としました。
optionで指定している値が入力候補です。