ホームページ > 記事 > ウェブフロントエンド > HTML 基本チュートリアル: ビューアとの対話、フォームタグ

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

零下一度オリジナル: 2017-05-12 13:57:011505ブラウズ

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="服务器文件">

説明:

で終わります。

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行标签中补充代码cols="50" rows="10"两个属性值，cols属性控制文本域的列数，rows属性控制文本域的行数。

标签的语义一定要根据单词来记忆，这样才会扎实透彻，

preformattde：预定义格式(文本)的意思，这里的<textarea>是多行文本区域的意思，<p class="sycode">根据意思就知道不同了，而且<textarea>中的默认字样，用户可以自行更改的，<pre class="brush:php;toolbar:false">中的内容，用户只能看不能动！ 
           <br>

col与rows设定的值只会影响输入框的大小，不会影响你输入多少字

是文本域输入 <br><input>是输入一行

四、使用单选框、复选框，让用户选择

 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     <label>男</label>
11     <input type="radio" value="1"  name="gender-man" />
12     <label>女</label>
13     <input type="radio" value="2"  name="gender-woman" />
14 </form>
15 </body>
16 </html>

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，

两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：

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

在浏览器中显示的结果：

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

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

来试一试：修改单选框代码错误（男、女可以同时选择），使其具有单选作用。

1、在编辑器中第11行、13行代码有错误，请改正。

记住：

1、同一组单选框name命名要一致。

2、你是否输入像下面的代码：

<label>男</label>
<input type="radio" value="1"  name="gender" />
<label>女</label>
<input type="radio" value="2"  name="gender" />

五、使用下拉列表框，节省空间

 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     <select>
11       <option value="看书">看书</option>
12       <option value="旅游">旅游</option>
13       <option value="运动">运动</option>
14       <option value="购物">购物</option>
15     </select>
16 </form>
17 </body>
18 </html>

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

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