简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML 基本チュートリアル: ビューアとの対話、フォームタグ

零下一度
リリース： 2017-05-12 13:57:01
オリジナル
1469 人が閲覧しました

1. フォームタグを使用してユーザーと対話します

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>表单标签</title>
 6 </head>
 7 <body>
 8 <form>
 9       <label for="username">用户名:</label>
10       <input type="text"  name="username" id="username" value="" />
11       <label for="pass">密码:</label>
12       <input type="password"  name="pass" id="pass" value="" />    
13       <input type="submit" value="确定"  name="submit" />
14       <input type="reset" value="重置" name="reset" />
15 </form>  
16 </body>
17 </html>
ログイン後にコピー

Web サイトはどのようにユーザーと対話しますか?答えは、HTMLフォーム(フォーム)を使用することです。フォームはビューアによって入力されたデータをサーバーに送信できるため、サーバー側プログラムはフォームから渡されたデータを処理できます。

文法: 

<form method="传送方式" action="服务器文件">
ログイン後にコピー

説明:

1.

: タグは、 で始まり
で終わります。

2.action: PHP ページ (save.php) など、ビューアによって入力されたデータが送信される場所。

3.method: データ送信メソッド (get/post)。 post は暗号化された送信、get はアドレスバーの送信、つまり暗号化されていない送信です。 

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
ログイン後にコピー

注:

1. すべてのフォーム コントロール (テキスト ボックス、テキスト フィールド、 ボタン、ラジオ ボックス、 チェック ボックス など) は、

に配置する必要があります。タグを使用します (そうしないと、ユーザーが入力した情報がサーバーに送信されない可能性があります)。

2. メソッド: post/get の違い この部分はバックエンド プログラマーが考慮すべき事項です。

試してみましょう: エディタの8行目の

タグにコードを追加します: 

method="post" action="save.php"
ログイン後にコピー

次のコードを入力しましたか:

HTML 基本チュートリアル: ビューアとの対話、フォームタグ

テキスト: テキストボックスパスワード: パスワードボックスraido: ラジオボタン チェックボックス: チェックボックス file: ファイル選択ボックス submit: 送信ボタン

ラベル内のテキストをクリックすると、そのテキストをコントロールに関連付けることができます。「for」属性を使用してラベルを別のラベルに接続します。要素を結び付けるには、「for」属性値が関連要素の「id」属性値と同じである必要があります。

2. テキスト入力ボックス、パスワード入力ボックス

 1 
 2 
 3 
 4 
 5 文本输入框、密码输入框
 6 
 7 
 8 
 9     账户: 
10     
11     

12     密码: 
13 
14  
15 
16
ログイン後にコピー

ユーザーがフォームに文字や数字などを入力する場合、テキスト入力ボックスが使用されます。テキストボックスをパスワード入力ボックスに変換することもできます。

文法: 

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
ログイン後にコピー

1. タイプ:

type="text" の場合、入力ボックスはテキスト入力ボックスです。

type="password" の場合、入力ボックスはパスワード入力ボックスです。

2. 名前: バックグラウンド プログラム ASP と PHP で使用するテキスト ボックスに名前を付けます。

3. 値: テキスト入力ボックスのデフォルト値を設定します。 (通常はプロンプトとして使用されます)

例: 

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
ログイン後にコピー

ブラウザに表示される結果:

HTML 基本チュートリアル: ビューアとの対話、フォームタグ

試してみる: フォームに名前とパスワードの入力ボックスを挿入します

1. エディターで 10 行の入力を行います。コード: 

<input  type="text"  name="myName" />
ログイン後にコピー

2. エディターの 13 行目にコードを入力します。 

<input  type="password"  name="pass" />
ログイン後にコピー

属性の間に少なくとも 1 つのスペースを入れます。

hidden は、送信ボタンとして画像を定義します。
number は、スピナーを定義します。コントロールの数値フィールド
password は、パスワード フィールドを定義します。フィールド内の文字はマスクされます
radio はラジオ ボタンを定義します
range はスライダー コントロールを備えた数値フィールドを定義します
reset はリセット ボタンを定義します。リセット ボタンは、すべてのフォーム フィールドを初期値にリセットします。
search 検索に使用するテキスト フィールドを定義します。
submit 送信ボタンを定義します。送信ボタンはサーバーにデータを送信します
テキスト デフォルト。ユーザーがテキストを入力できる単一行の入力フィールドを定義します。デフォルトは 20 文字です
url は URL に使用されるテキストフィールドを定義します

実際、値は現在ほとんど使用されていないという人もいますが、初心者はプレースホルダーが H5 の新しい属性であり、IE6 から IE9 がサポートしていないことを知らないと思います。ネイティブのプレースホルダー。

互換性の問題を解決せずにプレースホルダーだけを使用する場合 (プレースホルダーを使用するには、互換性コードの長いセクションを追加する必要があります)、それは機能せずにただ眺めているだけであるとしか言えません。

(赤いテキストはコメント領域の内容であり、一部は一時的に理解できません)

3. テキストフィールドは、複数行のテキスト入力をサポートします

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>文本域</title>
 6 </head>
 7 <body>
 8 <form action="save.php" method="post" >
 9     <label>个人简介：</label>
10     <textarea>在这里输入内容...</textarea>
11     <input type="submit" value="确定"  name="submit" />
12     <input type="reset" value="重置"  name="reset" />
13 </form> 
14 </body>
15 </html>
ログイン後にコピー

ユーザーがフォームに大きなセクションのテキストを入力する必要がある場合場合は、テキスト入力フィールドを使用する必要があります。

構文: 

<textarea  rows="行数" cols="列数">文本</textarea>
ログイン後にコピー

1. で終わります。

2. 列数: 複数行の入力フィールドの列数。

3. 行: 複数行の入力フィールドの行数。

4. の間にデフォルト値を入力できます。

例:
ログイン後にコピー

ブラウザでの結果の表示:

HTML 基本チュートリアル: ビューアとの対話、フォームタグ

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

来试一试：修改文本域的列数和行数

在编辑器中第10行