ヒント：これは私の個人的なITリソースのWebサイトです。アクセスして、確認することができます。
前章のHTMLに続いて、いくつかの概念と基本要素を整理しました。この章では、主にフォーム要素を整理します。
テキストボックス
入力タグタイプ属性がテキストの場合、それはテキストボックスを意味し、サイズはテキストボックスの長さ、つまり表示されるフォントの長さを設定でき、値はテキストボックスの初期値を設定でき、プレースホルダーは設定できますテキストボックスのプロンプト。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框</title>
</head>
<body>
<input type="text" /><br>
<input type="text" size="10" /><br>
<input type="text" value="有初始值的文本框" /><br>
<input type="text" placeholder="有提示语的文本框" />
</body>
</html>
効果：
パスワードボックス
入力タグタイプ属性がパスワードの場合、パスワードボックスを意味します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码框</title>
</head>
<body>
<input type="password" />
</body>
</html>
効果：
形
formタグは、アカウントやパスワードなどのデータをサーバーに送信するために使用されます。action属性はフォーム送信のアドレスを設定でき、method属性はフォームの送信方法を設定できます。2つのリクエストメソッドがあります。getメソッド属性の値が指定されていない場合、デフォルトではgetでリクエストします。
getとpostの違い：getはフォームのデフォルトの送信方法です。送信されたパラメーターはアドレスの後ろでスプライスされ、ブラウザーごとにスプライスされたパラメーターの長さの制限が異なります。通常、getリクエストを使用します。データを取得するとき。メソッド属性値がpostの場合、送信されたリクエストはpostで送信され、送信されたデータはブラウザに表示されません。ファイルのアップロードなどのバイナリデータの送信には使用できますが、getリクエストには使用できません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="user" /><br>
<input type="password" name="pwd" /><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
効果：
シングルボックス
入力タグのtype属性がradioの場合、単一のボックスであり、選択するとチェックされた属性がチェックされます。複数のラジオボックスがあり、同時に1つしか選択できない場合は、を設定する必要があります。すべてのラジオボックスの名前の値を同じ値にします。同じグループに入れるだけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选框</title>
</head>
<body>
一<input type="radio" name="group" /><br>
二<input type="radio" name="group" checked="checked" /><br>
三<input type="radio" name="group" /><br>
四<input type="radio" name="group" /><br>
五<input type="radio" name="group" /><br>
</body>
</html>
効果：
チェックボックス
入力タグタイプ属性がチェックボックスの場合、それはチェックボックスであり、チェックされた属性がチェックされている、つまり選択されていることを意味します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复选框</title>
</head>
<body>
一<input type="checkbox" name="group" /><br>
二<input type="checkbox" name="group" checked="checked" /><br>
三<input type="checkbox" name="group" /><br>
四<input type="checkbox" name="group" checked="checked" /><br>
五<input type="checkbox" name="group" /><br>
</body>
</html>
効果：
ドロップダウンリスト
selectタグはドロップダウンリストです。optionタグはオプションを表します。selectタグのsize属性は、表示されるオプションを設定できます。複数の属性値が複数の場合、複数の選択を行うことができます。オプションタグが選択されています。デフォルトで選択されています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉框</title>
</head>
<body>
<select size="3" multiple="multiple">
<option>选项一</option>
<option selected="selected">选项二</option>
<option selected="selected">选项三</option>
<option>选项四</option>
</select>
</body>
</html>
効果：
テキストフィールド
textareaタグはテキストフィールドです。テキストボックスとは異なり、テキストフィールドには複数の行とスクロールバーを含めることができます。属性colsとrowsは、行の幅と数を設定できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本域</title>
</head>
<body>
<textarea cols="9" rows="3"></textarea>
</body>
</html>
効果：
ボタン
入力タグのタイプ属性がボタンの場合はボタン、タイプ属性が送信の場合は送信ボタンであり、フォームに配置してフォームデータを送信できます。タイプ属性をリセットすると、フォームデータをリセットできるリセットボタン。type属性がimageの場合、フォーム送信のボタンとして画像を使用できます。ボタンラベルは、より多くの機能を備えたボタンラベルです。ラベルの内容は、テキストまたはimage。タイプ属性値が送信の場合は送信ボタンであり、タイプ属性値がリセットされるとリセットされます。ボタン。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮</title>
</head>
<body>
<input type="button" value="普通按钮" /><br>
<input type="submit" value="提交按钮" /><br>
<input type="reset" value="重置按钮" /><br>
<input type="image" src="/Users/liuzhenyu/Downloads/下载.jpeg" /><br>
<button><img src="/Users/liuzhenyu/Downloads/下载.jpeg" /></button><br>
</body>
</html>
効果：
終わり
フロントエンドのHTMLは基本的に整理されています。これが基本です。後で頻繁に使用します。練習は完璧です。次はCSSの部分です。個人的にはCSSの方が難しいと感じています。複雑なページを実装したい場合、手がかりがありません。次に、次の章でCSSを整理し、整理した後、CSSが進歩することを願っています！
これは私が良いと思う学習ウェブサイトの1つです。非常に包括的です。誰もが研究を終えることができれば、良い仕事を見つけることが保証されます。ここをクリックしてチェックしてください！
