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

HTMLフォームとは何ですか? HTML フォームのコンテンツの詳細な紹介 (コード付き)

不言
リリース： 2018-07-27 14:17:38
オリジナル
6020 人が閲覧しました

HTML フォームは、さまざまなタイプのユーザー入力を収集するために使用されます。フォーム要素は、ユーザーがフォームにコンテンツ (テキスト フィールド、ドロップダウン リスト、ラジオ ボタン、チェック ボックスなど) を入力できるようにする領域です。 .) 情報を入力するための要素。フォームは form タグ (

) を使用して定義されます。

1. はじめに

1. フォームの概念:

フォームの最も重要なパフォーマンスは、クライアントでユーザーの情報を受信し、データをクライアントに送信することです。これらのデータを操作するには、技術的な概念から、フォーム オブジェクトを操作するために使用されます。フォーム オブジェクトは、フォーム フィールド、ボタンなどのフォーム オブジェクトを作成するために使用されます。 タグではいくつかの属性を拡張できます: タグで定義される
データをフォームに送信するには、アクション属性が必要です 

<form action="some.php">
     </form>
ログイン後にコピー

上記のコードは、このフォームの機能が some.php ページのデータを送信することであることを示しています


b.method 属性

この属性の機能は、データがどのように送信されるかをブラウザーに伝えることですこの属性には「get」と「post」の 2 つのオプションがあります。デフォルトでは、データ送信方法は get、form です。フィールドに入力された内容は、アクションで指定された URL に追加されます。フォームを送信すると、ユーザーは明確な URL を取得します。このように URL にデータが追加されるため、お気に入りに保存したり、他のユーザーと共有したり、ホームページの URL に直接アクセスしたりできるという利点があります。たとえば、ユーザーがすでに登録した Web サイトのホームページをお気に入りから再度開くと、すでにログインしていることがわかります。状態。 post メソッドでは、データは HTTP ヘッダーの形式で送信され、フォーム データは URL の一部ではなくなります。 2 つの違いは、get はすべてのフォーム フィールドの値が直接表示されるため安全性が低いのに対し、post は表示される処理スクリプト以外のすべてを非表示にできるため、実際のアプリケーションでは通常、post が選択される処理方法です


c.name 属性


は、送信されたフォーム データをデータを処理するプログラムで認識できるようにするために使用されます。この場合、フォームに異なる名前を付けることができます。プログラムがそれを識別できるようにするためです

<form name="me">
</form>


...
<script language="JavaScript">
      var length=document.me.length.value;
</script>
ログイン後にコピー

コードの上記の部分は、フォーム me を通じて入力長の値を取得する方法を示しています


d。 enctype 属性

この属性は、HTML フォームデータのエンコード方式を表します。application/x-www-form-urlencoded (標準のエンコード方式、送信されたデータは名前と値のペアとしてエンコードされます)、multipart/form-data (データが情報の一部としてエンコードされていることを示し、フォームの MIME エンコード方式を定義し、ページ上の各コントロールはメッセージの一部に対応する従来の POST バッファーを作成します。 plain (データがプレーン テキストの形式でエンコードされていることを意味し、情報が (コントロールや書式設定文字を含まない)表示モード、ターゲット URL を開く場所を示します。4 つの方法を設定できます。_blank は新しいページでリンクを開くことを意味します。_self は同じウィンドウでページを開くことを意味します。_parent は親ウィンドウでページを開くことを意味します。_top は読み込みを意味します。リンクを含むウィンドウにページを挿入し、現在ウィンドウ内にあるページを置き換えます。

<form action="mailo:depp59@gmail.com"
      method="post"
      name="me"
      enctype="text/plain"
      target="_blank">
...
</form>
ログイン後にコピー
このコードは、このフォームのアクションは、投稿送信メソッドと私フォームを使用して電子メール depp59@gmail.com に送信することを示しています。新しいページで開くことができるようにテキスト/プレーンエンコーディングを使用します


 3. フォームフィールド: ユーザーがデータを入力する場所です


フォームフィールドは 3 つに分割できますオブジェクト: input、textarea、select ほとんどのフォームは、input 属性を通じて実装され、コントロール タイプを作成します


2. input オブジェクトの下のさまざまなフォーム式

input タグを通じて実装されます input 

<input name=""
       type=""
       value=""
       size=""
       maxlength="">
ログイン後にコピー

a. Name は入力データの名前を表し、その機能はプログラムに送信されたデータを理解させることです

<input type="text" name="length">   这个输入的数据命名为length
  var length=document.me.length.value;
ログイン後にコピー
で表示されますが、そのような name 属性が欠落している場合ブラウザは変更されず、バックグラウンドプログラムの後、JavaScriptプログラムは送信されたデータを取得できなくなります

b.type属性表示所定义的是哪种类型的表单形式，该属性有九个可选值:

text 单行的文本框
password 将文本替换为"*"的文本框
checkbox 只能做二选一的是或否选择
radio 从多个选项中确定的一个文本框
submit 确定命令文本框
hidden 设定不可被浏览用户修改的数据
image 用图片表示的确定符号
file 设置文件上传
button 用来配合客户端脚本

c.size:表示文本框字段的长度

d.maxlength:表示可输入的最长的字符数量

e.value:表示预先设置好的信息

4.text文本框的样式表单

<html>
<head>
    <title>text样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="some.php" name="myform">
         输入用户名:<input type="text" name="name" size=20 maxlength=12>  <br>
         输入邮箱地址:<input type="text" name="address" size=20 maxlength=20>
    </form>
</body>
</html>
ログイン後にコピー

代码中size定义了文本框的长度，而maxlength定义了这个文本框最多只能输入12个字符，如果超出了这个长度数据将不能输入，这两个text样式的数据定义了不同的名字这很关键，否则一旦需要被程序调用数据将无法辨认。

5.password输入密码的样式表单（可以将文本使用保密形式展示出来的一个功能，根据不同的浏览器会使用点状形态或星号符表示）

<html>
<head>
    <title>password样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="some.php" name="myform">
         输入用户名:<input type="text" name="name" size=40 maxlength=12>  <br>
         输入邮箱地址:<input type="text" name="address" size=20 maxlength=20><br>
         输入密码:<input type="password" name="password" size=20 maxlenght=12>
    </form>
</body>
</html>
ログイン後にコピー

6.checkbox复选框的表单样式（浏览器会在选择栏前面提供一个小方框如果选择小框中会添加小勾符号表示选中）

<html>
<head>
    <title>checkbox样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
   
<body>
    <form action="some.php" name="myform">
        <h3>注册信息:</h3>
           <input type="checkbox" name="truename" checked="checked">使用真实姓名
        <h3>实名制可以方便您更好地和朋友交流</h3>
           <input type="checkbox" name="address" checked="checked">显示我的地址
        <h3>如果去除勾选，其他用户将无法查到你的地址</h3>
           <input type="checkbox" name="mail"  checked="checked">可以给我发邮件
        <h3>如果勾选，我们将会为您发送来自广告商的信息</h3> 
    </form>
</body>
</html>
ログイン後にコピー

上面代码中添加了checked="checked"表示复选框默认值设置为checked,那么√符号会被默认添加

7.radio单选按钮的样式表单（多选一表单）

radio样式类似于选择题，在一组选项中选出唯一的一项，发送这列数据，其中给这组选项定义相同的名字，但是通过value属性 来加以区别，因此，这里必须给input对象设定value值，而且不同对象的value值不能相同，否则数据无法辨认

<html>
<head>
    <title>radio样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head> 
<body>
    <form action="some.php" name="myform">
       <h3>性别</h3>
           <input type="radio" name="gender" value="one">我是男的<br>
       <h3>请正确选择您的性别哦</h3>
           <input type="radio" name="gender" value="two">我是女滴<br>
       <h3>请正确选择您的性别哦</h3>
    </form>
</body>
</html>
ログイン後にコピー

8.submit提交数据的样式表单
该属性创建一个按钮，该按钮的作用就是提交数据。当点击"提交"按钮时，数据会发送到指定的地方。其中通过value值可以修 改按钮上显示的内容。此外还有一个reset属性，这是一个复位按钮，当被点击时表单的内容会被重新设置，回到页面初始位置

<html>
<head>
    <title>submit样式表单</title>
    <style type="text/css">
        input{
            font:100% 微软雅黑;
        }
    
    </style>
</head>   
<body>
    <form action="some.php" name="myform">
        <h3>性别</h3>
           <input type="radio" name="gender" value="one">我是男的<br>
        <h3>请正确选择您的性别哦</h3>
           <input type="radio" name="gender" value="two">我是女滴<br>
        <h3>请正确选择您的性别哦</h3>
    
           <input type="submit" name="submit" value="确定">
           <input type="reset" name="submit" value="复位">
    </form>
</body>
</html>
ログイン後にコピー

9.hidden隐藏域的样式表单
hidden属性可以创建一个隐藏域，数据会被隐藏起来，用户无法对其进行操作（这些数据通常是用户不关心的但是必须被提交 的数据）
10.image样式的表单（可以看做图像替换按钮的技术，当图像被点击时，数据一并被提交至服务器）

使用src属性指定这张图像的路径，使用alt属性来添加文本注释，此时提交按钮被替换成一个小小的图像，当点击图像时，其作 用就相当于submit按钮，但是当表单数据被提交的同时，用户所单击的图像的位置坐标（image.x=23 image.y=59）也会被发送
表单中还有一种触发事件的button表单，它只是一个按钮，单个button按钮并不会提交任何数据，它的作用是用来调用前端页 面，即客户端的脚本程序

11.file上传文件的样式表单
该表单允许用户上传自己的文件，例如用户上传自己的图像给服务器，用来改变用户在不同网站上的形象图片。需要注意的 是，当使用file样式的表单时，必须在标签中说明编码方式，这样服务器才可以接收到正确信息

<body>
    <h3>上传我的文件</h3>
    <form action="some.php" enctype="multipart/form-data" name="myform">
        <input type="file" name="uploadfile"> 
    </form>
</body>
ログイン後にコピー

三、textarea对象的表单
该对象就像是input对象中的text表单，只不过是扩展过的text样式表单，可以通过行(rows)属性和列(cols)属性来编辑文本域的大 小，常见于留言板、论坛中回帖时的文本框等

<html>
<head>
    <title>textarea对象的表单</title>
    <style type="text/css">
        textarea{
            font:100% 微软雅黑;
            color:navy;
        }
    
    </style>
</head> 
<body>
  <form action="some.php" method="post" enctype="multipart/form-data" name="myform">
      <textarea name="some" rows=10 cols=50 value="say">请文明用语:
      </textarea>
  </form>
</body>
</html>
ログイン後にコピー

textarea属性标签必须要封闭，且生成页面时在文本框中会预先设置好文本“请文明用语”，但是用户不得不先删去预先的文本再 编辑自己的内容。当文本框中输入的内容超出预先设置的行数时会自动出现滚动条，如果没有超出文本框的范围则滚动条是灰 色的
四、select对象表单
使用select将创建一个列表样式的表单，显示为出现一个下拉列表框，令用户可以方便的选择其中一个目录，通常在一些要求填 写地区、生日等信息中，设计者可以给使用者准备好选项，需要使用

<html>
<head>
    <title>select对象的表单</title>
    <style type="text/css">
        select{
           font:100% 微软雅黑;
           color:Green;
        }
    </style>
</head> 
<body>
   <form action="some.php" method="post" enctype="multipart/form-data" name="myform">
      <h3>地址</h3>
      <select name="上海">
          <option>黄浦区</option>
          <option>虹口区</option>
          <option>静安区</option>
          <option>宝山区</option>
      </select>
   </form>
</body>
</html>
ログイン後にコピー

用户可以通过下拉列表框选择一个“地址”，而这个数据会被表单发送到服务器，此外还可以通过value属性为每一个option指定不 同的值，这样的话value设置的值将取代option的文本内容。注意如果设计者希望预先设置初始值，那么在所希望的option中添加 selected="selected"就可以了，如,否则默认初始值应该是第一个出现的标签配合label属性来给选项分类

<select name="上海">
      <optgroup label="Team1">
          <option>黄浦区</option>
          <option selected="selected">虹口区</option>
          <option>静安区</option>
          <option>宝山区</option>
      </optgroup>
      <optgroup label="Team2">
          <option>长宁区</option>
          <option>杨浦区</option>
          <option>徐汇区</option>
          <option>普陀区</option>
      </optgroup>        
</select>
ログイン後にコピー

此外如果不希望select对象以下拉列表框的形式展现出来，有一种方式可以将目录项以滚动条的样式表现出来，只需要在select 标签中加入size属性，如"size=6"表示是一个能容纳6行文字的文本框，当目录项超出设置的行数时将出现滚动条

<select name="上海" size="5">
        <option>黄浦区</option>
        <option selected="selected">虹口区</option>
        <option>静安区</option>
        <option>宝山区</option>
        <option>长宁区</option>
        <option>杨浦区</option>
        <option>徐汇区</option>
        <option>普陀区</option>        
</select>
ログイン後にコピー

五、表单域集合
如果表单的项目过多或为了修饰表单部分，可以通过使用表单域将表单分组，表单域的代码由

标签和标签组 合而成，默认情况下，
标签勾画出表单域的框形，标签的对象像标题一样出现在框的左上角

<html>
<head>
    <title>表单域</title>
</head> 
<body>
  <form action="some.php" method="post" name="myform">
     <fieldset>
          <legend>注册信息:</legend>
          输入用户名:<input type="text" name="name" size=20 maxlength=12>
          <!--这里可以放入许多样式的表单-->
     </fieldset>
  </form>
</body>
</html>
ログイン後にコピー

 相关推荐：

HTML 表单

HTML FORM 表单_html/css_WEB-ITnose

以上がHTMLフォームとは何ですか? HTML フォームのコンテンツの詳細な紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
htmlフォーム
ソース：php.cn
前の記事：http フロントエンド ストレージに関する概要 次の記事：HTML テーブルの属性とは何ですか? HTML テーブルの 10 個の基本属性の概要
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート