私は現在、HTML、PHP、JavaScript、その他の楽しいWebに関することを学んでいます。この時点で、HTML、CSS、PHPをすべて使用して素敵なWebフォームを作成することができました。
数日前、JavaScriptでいくつかの動的オプションを追加したかったのですが、今は壁にぶつかっています。フォームをhtmlファイルに書き込む代わりに、フォームを.jsファイルに入れて、javascriptでビルドすることにしました。これが私がそれをしている方法です:
<!-- Insert the form into <div id=field> -->
...
document.getElementById(field).innerHTML +=
'<label>Name'
+'<span class="small">ex: stg_testdb1</span>'
+'</label>'
+'<input type="text" name="name" id="name" />';
document.getElementById(field).innerHTML +=
'<label>Layer</layer>'
+'<span class="small">ex: stg_testdb1</span>'
+'<select name="layer" id="layer"/>'
+'<option value="Development">D</option>'
+'<option value="QA">A</option>'
+'<option value="Staging">S</option>'
+'<option value="Production">P</option>';
+'</select>';
....
これが「select」、「input」、「label」タグのCSSコードです。
#stylized select{
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:145px;
float:left;
}
フォームを純粋なHTMLで作成すると、すべてが完全に機能します。これがフォームの一部の写真です:
しかし、innetHTML + =を使用してJavaScriptで記述すると、ドロップボックス(選択フィールド)を除いてすべてが正常に機能しているようです。
cssはまったく同じままなので、少し混乱しています。また、最初のテキストフィールドの下に別のテキストフィールドを追加しようとすると、すべてが正常にフォーマットされます。
私はWeb開発に慣れていないので、何か大きなものが欠けていると思いますか?また、私が行っているようにコードを挿入することは正しいことではないと確信していますが、今のところ、ほとんどうまく機能しています;)