コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML form_html/css_WEB-ITnose

HTML form_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:27:02
オリジナル
1255 人が閲覧しました

1. フォーム タグを使用する

Web サイトでは、HTML フォームを使用してユーザーがフォームにコンテンツを入力できます (テキスト ボックス、テキスト フィールド、チェック ボックス、ドロップなど)。 -ダウンリスト、ボタンなど。フォームはビューアによって入力されたデータをサーバーに送信できるため、サーバー側のプログラムはフォームから渡されたデータを処理できます。 フォームはフォームタグ

を使用して定義されます: 

<form method="传送方式" action="表单提交地址" name="表单名称"></form>
ログイン後にコピー

注: はペアで表示される終了タグのペアです。 method属性はデータ送信の方法(get/post)を指定します。 action 属性は、フォームの送信時にユーザーが入力したデータが送信される場所 (PHP ページ (demo.php) など) を指定します。 name 属性はフォームの名前を設定します。すべてのフォーム コントロールは タグの間に配置する必要があります。そうしないと、ユーザーが入力した情報はサーバーに送信されません。

accept-charset 属性は、サーバーが処理できるフォームデータの文字セットを指定します。デフォルト値は予約文字列「UNKNOWN」で、 要素を含むドキュメントのエンコーディングを表します。

enctype 属性 は、フォームデータをサーバーに送信する前にエンコードする方法を指定します。注: enctype 属性は、method="post" が使用されている場合にのみ使用されます。

ここに 2 つの新しい属性があります:

autocomplete 属性 は、フォームでオートコンプリートを有効にするかどうかを指定します。オートコンプリートを使用すると、ブラウザーはフィールドへの入力を予測できます。ユーザーがフィールドに入力を開始すると、ブラウザには、以前に入力した値に基づいてフィールドに入力するためのオプションが表示されます。注: オートコンプリート属性「on」はフォームに適用され、「off」は特定の入力フィールドに適用され、その逆も同様です。デフォルト値の on は、オートコンプリートが有効であることを指定します。ブラウザは、ユーザーが以前に入力した内容に基づいて値を自動的に入力します。 off は、オートコンプリート機能が無効になることを指定します。ユーザーは各フィールドを使用するたびに値を入力する必要があり、ブラウザは自動的に入力を完了しません。

novalidate 属性は、フォームの送信時にフォームデータが検証されないことを指定します。

From:

の Get メソッドと Post メソッド (1) Get メソッドは、アクションが指す URL の後ろにフォーム内のデータを var=value の形式で追加し、この 2 つが接続されます。 "?" を使用して各変数を "&" で接続し、Post メソッドはフォーム内のデータをフォームのデータ本体に配置し、対応するメソッドに従ってアクションが指す URL に渡します。変数と値。 Get メソッドは次のように送信されます: 

http://www.abc.com/demo.php?name=小白&password=12345678
ログイン後にコピー

(2) Get メソッドは、送信処理中に要求された URL アドレスにデータが格納されるため、情報漏洩が発生しやすいため安全ではありません。

(3) Get メソッドで送信されるデータ量は非常に少なく、通常は約 2KB に制限されますが、実行効率は Post メソッドよりも優れており、Post メソッドで送信されるデータ量は比較的大きいため、はサーバーがデータを読み取るのを待っていますが、これには大量のデータによるサーバーへの悪意のある攻撃を避けるためのバイト制限もあります。そのため、データの送信には Post メソッドを使用することをお勧めします。ユーザー登録、および投稿の閲覧などのデータを要求するための Get メソッド。

2. テキストボックス

ユーザーがフォームに文字や数字などを入力したい場合、テキスト入力ボックスはパスワード入力にも変換できます。箱。入力フィールドは、ユーザーがデータを入力できる入力フィールドを指定する タグで完了します。入力フィールドは、type 属性に応じてさまざまな方法で変更できます。 以下の通り: 

1 <form method="post" action="demo.php">2     <label for="name">用户名:</label>3     <input type="text" name="username" id="name" value="小白"><br/>4     <label for="pass">密　码:</label>5     <input type="password" name="password" id="pass" placeholder="请输入密码">6 </form>
ログイン後にコピー

タグは入力フィールドを定義するために使用され、type 属性は表示される入力フィールドの内容を指定し、 を定義します。単一行のテキストフィールド入力。デフォルトの表示幅は 20 文字です。 name 属性は、バックグラウンド プログラム呼び出しのテキスト ボックスに名前を付けます。 type="password" はパスワード フィールドを定義します。パスワード フィールドの文字はプレーン テキストでは表示されず、アスタリスクまたはドットに置き換えられます。

value 属性は、一般的にプロンプ​​トとして機能するテキスト ボックスのデフォルト値を設定できます:

(1)、「テキスト」、「パスワード」の場合。 "、" hidden" タイプ。入力フィールドの初期 (デフォルト) 値を定義します。

(2)、「ボタン」、「送信」、「リセット」の場合、ボタン上のテキストを入力、定義します。

(3). 「checkbox」「radio」「image」タイプの場合、フォーム送信時にその値がフォームのアクションURLに送信されます。 。

　　注意：value 属性对于 和 是必需的，不适用于 。

　　而 placeholder 属性则可规定输入字段预期值的简短的提示信息，比如一个样本值或者预期格式的短描述，该提示会在用户输入值之前显示在输入字段中，该值显示为虚体，颜色浅，当用户输入时自动清除，而用于 的 value 属性的默认值显示为实体，而且颜色深，在用户输入时需要自行清除。placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

　　

1 <form method="post" action="demo.php">2     <label for="male">男</label>3     <input type="radio" id="male" name="gender"><br/>4     <label for="female">女</label>5     <input type="radio" id="female" name="gender"><br/>6     <label for="email">邮箱</label>7     <input type="email" id="email" placeholder="请输入邮箱地址">8 </form>
ログイン後にコピー

3、文本域

　　文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过