HTMLフォーム<form>タグ

HTMLフォーム

HTMLフォームは、ユーザー入力の種類を収集するために使用します。

 

二、HTML要素

(A)<form>要素  

HTMLフォームを定義する<FORM>要素    の<form> ... </フォーム>

 

1.アクションのプロパティ

action属性は、フォームを送信する際に実行するアクションを定義します。

一般的な方法は、送信ボタンを使用することで、サーバーにフォームを送信し、通常、フォームは、Webサーバ上のWebページに送信されます。上記の例では、フォームが送信されて処理するサーバースクリプトを指定します。

あなたはaction属性を省略した場合、アクションは、現在のページに設定されます。

 

2メソッド、プロパティ

この方法は、提出フォームはHTTPメソッドを(GETまたはPOST)を使用する際に指定する属性:

<フォームアクション= "action_page.php"方法は= "GET">
<フォームアクション= "action_page.php" METHOD = "POST">

 

HTMLフォームは、フォーム要素がように異なる入力要素の種類、チェックボックス、ラジオボタン、送信ボタンを参照してください、そして、フォーム要素が含まれています

(II)<INPUT>要素    

 <INPUT>要素は、入力フィールドを定義し、type属性に応じて、対応する入力フォームにおける多くの要素は、(存在します

name属性:あなたが適切に提出する場合は、各入力フィールドにはname属性を設定する必要があります。

含みます:

  • テキストテキスト入力
  • ラジオラジオボタン入力(唯一の選択肢)
  • ボタン(送信フォーム)を提出提出
  • チェックボックスのチェックボックス
  • パスワードパスワード

 


 

typeプロパティの値

 (1)テキスト入力

<input type = "text">  テキスト入力用に定義された単一のライン入力フィールド、

パフォーマンス結果(フォーム自体が表示されていない、テキストフィールドのデフォルトの幅は20文字です。)

(2)入力のラジオボタン

<input type =「ラジオ」>  定義ラジオボタン、いずれかを選択するためのオプションの数が限られ、例:

パフォーマンスの結果

(3)送信ボタンを

<input type =「送信」>は、  ボタンは、フォーム処理プログラム(フォームハンドラ)にフォームを送信画定します。

フォームハンドラは、通常、入力データを処理するサーバーページのスクリプトが含まれています。

パフォーマンスの結果

(4)パスワードを入力します。

<input type =「パスワード」>定義されたパスワードフィールド領域

パフォーマンス結果(フィールドにパスワードの文字が隠されている(アスタリスクまたは円として表示されます))

(5)  チェックボックス(チェックボックス)

<input type =「チェックボックスが」>は、チェックボックスを定義する。いくつかの指定された選択肢からの1つのまたは複数のオプションを選択します。

パフォーマンスの結果

 

 


 

(II)<のTextArea>要素

<textarea>定义一个多行的文本输入控件,文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)

可以通过 cols rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS height width 属性

表现效果

<textares> 标签支持HTML的全局属性,也支持HTML的事件属性。更多<textarea>标签的属性内容请参考https://www.runoob.com/tags/tag-textarea.html

 


(三)<button>元素

<button> 标签定义一个按钮。

在 <button> 元素内部可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

提示:请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

表现效果

 


(四) <select>元素

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。<select> 元素是一种表单控件,可用于在表单中接受用户输入

表现效果


(五) <fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

代码

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>
表现效果


(六)datalist 元素

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id

表现效果


(七)keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准


(八)output 元素

output 元素用于不同类型的输出,比如计算或脚本输出

おすすめ

転載: www.cnblogs.com/nyw1983/p/11300027.html