HTML フォームと入力
HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。
HTML フォーム
フォームとは、フォーム要素を含む領域です。
フォーム要素を使用すると、ユーザーはテキスト領域、ドロップダウン リスト、ラジオボタン、チェックボックスなどのコンテンツをフォームに入力できます。
フォームはフォームタグ <form> を使用して設定されます:
<form>
<input type="">
<input type="">
</form>
HTML フォーム - 入力要素
ほとんどの場合に使用されるフォーム タグは、input タグ (<input>) です。
入力の型はtype属性(type)で定義されます。一般的に使用される入力タイプのほとんどは次のとおりです。
テキスト フィールド
テキスト フィールドは、ユーザーがフォームに文字を入力する場合、<input type="text"> タグを通じて設定されます。数字やその他の内容が含まれる場合に使用されます。
<form>
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="old">
</form>
注: フォーム自体は表示されません。また、ほとんどのブラウザでは、テキスト フィールドのデフォルトの幅は 20 文字です。
パスワード フィールドはタグ <input type="password"> で定義されます:
<form>
密码: <input type="password" name="pwd">
</form>
注: パスワード フィールドの文字はプレーン テキストでは表示されず、アスタリスクまたはドットに置き換えられます。
ラジオボタン
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">男
<br>
<input type="radio" name="sex" value="female">女
</form>
チェックボックス
<input type="checkbox"> 選択項目から 1 つまたは複数のオプションを選択する必要があります。 。
<form>
<input type="checkbox" name="hobby" value="LOL">我喜欢玩LOL
<br>
<input type="checkbox" name="hobby" value="CF">我喜欢玩CF
</form>
送信ボタン
<input type="submit"> は送信ボタンを定義します。
ユーザーが確認ボタンをクリックすると、フォームの内容が別の送信ボタンに送信されます。ファイル。フォームの action 属性は、宛先ファイルのファイル名を定義します。通常、action 属性で定義されたファイルは、受信した入力データに対して関連する処理を実行します。 :
<form name="input" action="html_form_action.php" method="get">
用户名: <input type="text" name="user">
密码: <input type="password" name="pwd">
<input type="submit" value="Submit">
</form>
上記をまとめると:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
姓名：<input type="text" name="name"><br/><br/>
性别：<input type="text" name="sex"><br/><br/>
年龄：<input type="text" name="old"><br/><br/>
<input type="radio" name="sex" value="male">男
<br/><br/>
<input type="radio" name="sex" value="female">女
<br/><br/>
我的爱好：
<br/><br/>
<input type="checkbox" name="hobby" value="LOL">LOL
<br/><br/>
<input type="checkbox" name="hobby" value="CF">CF
<br/><br/>
<input type="checkbox" name="hobby" value="DOTA">DOTA
<br/><br/>
我的家乡：
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="xianggang">香港</option>
</select>
<br/><br/>
用户名: <input type="text" name="user">
<br/><br/>
密 码: <input type="password" name="pwd">
<br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
次のセクション