// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'<p style="text-align: left;">このメソッドはテキストに適用できます。パスワード、非表示を選択します。ただし、ラジオ ボタンとチェック ボックスの場合、value 属性は常に HTML のプリセット値を返します。実際に取得する必要があるのは、ユーザーがオプションを「チェック」したかどうかなので、checked を使用して判断する必要があります: </p>
</ul>
<pre class="brush:php;toolbar:false">// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false 値の設定 値の設定は、テキスト、パスワード、非表示、選択の場合は、値を直接設定するだけです:
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
ラジオ ボタンとチェック ボックスの場合は、checked を true または false に設定するだけです。 。
HTML5 コントロールHTML5 では、多数の標準コントロールが追加されており、一般的に使用されるコントロールには、日付、日時、日時ローカル、色などが含まれます。それらはすべて タグを使用します。 HTML5 をサポートしていない新しいコントロールは認識されず、type="text" として表示されます。 HTML5 をサポートするブラウザは、フォーマットされた文字列を取得します。たとえば、type="date" の入力値は、YYYY-MM-DD 形式の有効な日付、または空の文字列であることが保証されます。
フォームを送信する
最後に、JavaScript は 2 つの方法でフォームの送信を処理できます (AJAX メソッドは後で紹介します)。 方法 1 は、
<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">
の欠点は、この方法は、ブラウザがフォームを正常に送信することを妨げます。デフォルトでは、ブラウザは
<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script>
false を返した場合、ブラウザは送信を続行するように true を返す必要があることに注意してください。フォームの送信は続行されません。この状況は通常、ユーザー入力エラーに相当し、ユーザーに
エラー メッセージ が表示され、フォームの送信が終了します。 を確認・変更する際はを活用してデータを渡してください。 たとえば、多くのログイン フォームではユーザーがユーザー名とパスワードを入力することが求められますが、セキュリティ上の理由から、フォームを送信するときにクリア テキストのパスワードは送信されず、パスワードの MD5 が送信されます。通常の JavaScript 開発者は、 を直接変更します:
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 继续下一步:
return true;
}
</script>
このアプローチは問題ないようですが、ユーザーがパスワードを入力して送信すると、パスワード ボックスの表示が突然、数 * から 32 * に変わります (MD5 には32文字）。
要想不改变用户的输入，可以利用实现：
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var input_pwd = document.getElementById('input-password');
var md5_pwd = document.getElementById('md5-password');
// 把用户输入的明文变为MD5:
md5_pwd.value = toMD5(input_pwd.value);
// 继续下一步:
return true;
}
</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
用history让ajax支持前进/后退/刷新
原生ajax与封装的ajax使用方法（附代码）
以上がajaxを使用してJavaScriptでフォームを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
