HTML フォームと入力

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。

HTML フォーム

フォームとは、フォーム要素を含む領域です。

フォーム要素を使用すると、ユーザーはテキスト領域、ドロップダウンリスト、ラジオボタン、チェックボックスなどのコンテンツをフォームに入力できます。

フォームはフォームタグ <form> を使用して設定されます:

<form>

</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/>
密&nbsp码: <input type="password" name="pwd">
<br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>

学び続ける

新しいファイル

<!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/> 密&nbsp码: <input type="password" name="pwd"> <br/><br/> <input type="submit" value="提交"> </form> </body> </html>

提出するリセットコード

自動運転