混乱を招き、間違いを起こしやすい HTML タグのまとめ-PHPチュートリアル-php.cn

混乱を招き、間違いを起こしやすい HTML タグのまとめ

WBOY

リリース： 2016-08-08 09:19:54

オリジナル

972 人が閲覧しました

1 日苦労した結果、HTML タグの正しい使用方法とそれぞれの適用可能性を明確に理解できました。これは、同じような間違いを繰り返さないようにするための簡単な要約です。

すべてはそのような問題のせいです

<html>
<head>
</head>
<body>
	<form id="form1" method="get" >	
		用户名：<input type="text" id="name" name="name" />
		<p id="username"></p>
		<br />
		密码：<input type="password" id="password" name="password" />
		
		<button type="submit" /button>		
	</form>

	<script>
	window.x=document.getElementById("username");
	window.
	{
		document.getElementById('name').focus();
	}
	//
	function mUp()
	{	
		if(document.getElementById('name').value=="")
		{
			x.innerHTML = "用户名不能为空";
			//alert("不能为空");
		}
		else
			document.getElementById('form1').action="/login";
	}
	</script>	
</body>
</html>

ログイン後にコピー

上記のコードを実行し、何も入力しない状態で「ログイン」ボタンをクリックすると、「ユーザー名を空にすることはできません」というプロンプトが表示されますが、一度表示されただけでクラッシュします。理由は何ですか？

重要なのは、この時点で

<button type="submit" /button>

ログイン後にコピー

によってトリガーされるイベントが 2 つあるということです。まず、onclick に対応する関数を呼び出し、次に自動的に送信されます (この時点ではタイプが submit であるため)。これにより、プロンプトが自然に上書きされます。したがって、タイプをボタンに設定すると問題を解決できます。

以下は簡単な概要です。

HTML タグの type 属性

値	説明
button	はクリック可能なボタンを定義します (ほとんどの場合、 JavaScriptの起動を通じてスクリプト )。
チェックボックス	チェックボックスを定義します。
file	ファイルアップロード用の入力フィールドと「参照」ボタンを定義します。
hidden	非表示の入力フィールドを定義します。
image	画像の形式で送信ボタンを定義します。
パスワード	パスワードフィールドを定義します。このフィールドの文字はマスクされます。
ラジオ	ラジオボタンを定義します。
リセット	リセットボタンを定義します。リセットボタンを押すと、フォーム内のすべてのデータがクリアされます。
送信	送信ボタンを定義します。送信ボタンをクリックすると、フォームデータがサーバーに送信されます。
text	ユーザーがテキストを入力できる単一行の入力フィールドを定義します。デフォルトの幅は 20 文字です。