HTML form_html/css_WEB-ITnose

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

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

<form method="传送方式" action="表单提交地址" name="表单名称"></form>

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

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

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. テキストボックス

ユーザーがフォームに文字や数字などを入力したい場合、テキスト入力ボックスはパスワード入力にも変換できます。箱。入力フィールドは、ユーザーがデータを入力できる入力フィールドを指定する d5fd7aea971a85678ba271703566ebfd タグで完了します。入力フィールドは、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>

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

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

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

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

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

　　注意：value 属性对于 514d05be645eb7d51e331036aaf6fa36 和 5531b4c9ceb3f990b641fa70a3e40caa 是必需的，不适用于 a2dc5349fb8bb852eaec4b6390c03b14。

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

　　2e1cf0710519d5598b1f0f14c36ba674 标签则为 input 元素定义标记，一般为输入标题。2e1cf0710519d5598b1f0f14c36ba674 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在该标签内点击文本，就会触发此控件。就是说，当用户单击选中该 2e1cf0710519d5598b1f0f14c36ba674 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 2e1cf0710519d5598b1f0f14c36ba674 标签相关连的表单控件上）。for 属性规定 label 与哪个表单元素绑定，该属性的值应当与绑定元素的 id 属性值相同。如下：

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、文本域

　　文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过 4750256ae76b6b9d804861d8f69e79d3 标签完成，如下：

1 <form method="post" action="demo.php">2     <label for="txt">发表意见：</label><br/>3     <textarea cols="50" rows="10" id="txt">在这里输入内容...</textarea>4 </form>

 

　　注意：4750256ae76b6b9d804861d8f69e79d3 标签是一对闭合标签，成对出现，在开始标签和结束标签之间可以输入默认值，cols 和 rows 属性则定义文本域的行数和列数，更好的办法是使用 CSS 的 width 和 height 属性来定义文本与的大小，width 代替 cols，height 代替 rows。

 

4、选择框

　　选择框可以让用户做出选择，在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，HTML 中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。定义选择框通过 d5fd7aea971a85678ba271703566ebfd 标签完成，不同的是输入类型。

　　(1)、单选框

　　type="radio" 定义了单选框，也叫单选按钮，允许用户在一定数量的选择中选取一个选项。如下：

1 <form method="post" action="demo.php">2     <label for="love">喜　欢</label>3     <input type="radio" id="love" name="like" value="喜欢" checked><br/>4     <label for="noLove">不喜欢</label>5     <input type="radio" id="noLove" name="like" value="不喜欢"><br/>6     <label for="casual">无所谓</label>7     <input type="radio" id="casual" name="like" value="无所谓"><br/>8 </form>

 

　　(2)、复选框

　　type="checkbox" 定义了复选框，允许用户可以选择多个选项。如下：

 1 <form method="post" action="demo.php"> 2     <label for="tool1">自行车</label> 3     <input type="checkbox" id="tool1" name="bike" value="自行车"><br/> 4     <label for="tool2">汽　车</label> 5     <input type="checkbox" id="tool2" name="car" value="汽车"><br/> 6     <label for="tool3">飞　机</label> 7     <input type="checkbox" id="tool3" name="plane" value="飞机" checked><br/> 8     <label for="tool4">火　箭</label> 9     <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>10     <label for="tool5">毛　线</label>11     <input type="checkbox" id="tool5" name="wool" value="毛线">12 </form>

 

　　value 属性值是必需的，为提交数据到服务器的值，供后台程序使用。name 属性为输入控件命名，供后台程序使用，checked 属性规定在页面加载时应该被预先选定的 d5fd7aea971a85678ba271703566ebfd 元素。该属性只适用于 5531b4c9ceb3f990b641fa70a3e40caa 和 514d05be645eb7d51e331036aaf6fa36。checked 属性用于设置默认选项，即该选项会被默认选中。该属性也可以在页面加载后，通过 JavaScript 代码进行设置。

　　注意：同一组的单选按钮，name 属性取值一定要一致，比如上面例子为同一个名称“like”，这样同一组的单选按钮才可以起到单选的作用。同一组的复选框，name 属性取值可以一致，这样方便为其定义样式，或者通过 JS 获取元素。

 

5、下拉列表框

　　下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、也可以多选。下拉列表框通过 221f08282418e2996498697df914ce4e 标签 和 5a07473c87748fb1bf73f23d45547ab8 标签完成。

　　(1)、下拉列表单选框

 1 <form method="post" action="demo.php"> 2     <label for="like">喜欢：</label> 3     <select id="like" name="cars"> 4         <option value="奥迪">奥迪</option> 5         <option value="宝马">宝马</option> 6         <option value="奔驰">奔驰</option> 7         <option value="宾利">宾利</option> 8         <option value="路虎">路虎</option> 9     </select>10 </form>

 

　　(2)、下拉列表复选框

 1 <form method="post" action="demo.php"> 2     <label for="like">喜欢：</label> 3     <select id="like" name="cars" multiple> 4         <option value="奥迪">奥迪</option> 5         <option value="宝马">宝马</option> 6         <option value="奔驰">奔驰</option> 7         <option value="宾利">宾利</option> 8         <option value="路虎" selected>路虎</option> 9     </select>10 </form>

 

　　221f08282418e2996498697df914ce4e 标签定义下拉列表选项，而 5a07473c87748fb1bf73f23d45547ab8 标签定义下拉列表中的选项。

　　下拉列表单选框和下拉列表复选框，唯一的不同就是复选框使用了 multiple 属性实现了多选功能，下拉列表可以进行多选操作就是在 221f08282418e2996498697df914ce4e 标签中设置了 multiple 属性，该属性用于规定可同时选择多个选项，需要注意：下拉列表框根据选项的个数(单选/复选)，会在网页上呈现不同的显示效果。在不同的操作系统，选择多个选项的方法也不同，在 windows 操作系统下，需要按住 Ctrl 键来选择多个选项，而在 Mac 系统下，需要按住 Command 键来选择多个选项。

　　5a07473c87748fb1bf73f23d45547ab8 标签的 value 属性值为向服务器提交的值，selected 属性则表示该选项被默认选中，即首次在列表中时表现为选中状态。该标签需要与 221f08282418e2996498697df914ce4e 标签配合使用，否则这个标签是没有任何意义的。

　　221f08282418e2996498697df914ce4e 元素是一种表单控件，可用于在表单中接受用户输入。还元素有几个重要属性，required 属性规定用户在提交表单前必须选择一个下拉列表中的选项。autofocus 属性规定在页面加载时下拉列表自动获得焦点。size 属性规定下拉列表中可见选项的数目。由于各属性之间的差异，需要告诉用户是否可以多项选择，对用户更友好的方式是使用复选框。

　　如果有很多的选项组合，就可以使用 5b7a15bed8615d1b843806256bebea72 标签能够很简单的将相关选项组合在一起。该标签经常用于把相关的选项组合在一起。如下：

 1 <form method="post" action="demo.php"> 2     <label for="like">喜欢：</label> 3     <select> 4         <optgroup label="国产"> 5             <option value="奇瑞">奇瑞</option> 6             <option value="大众">大众</option> 7             <option value="现代">现代</option> 8             <option value="哈弗">哈弗</option> 9             <option value="比亚迪">比亚迪</option>10         </optgroup>11         <optgroup label="进口">12             <option value="兰博基尼">兰博基尼</option>13             <option value="雷克萨斯">雷克萨斯</option>14             <option value="凯迪拉克">凯迪拉克</option>15             <option value="玛莎拉蒂">玛莎拉蒂</option>16             <option value="英菲尼迪">英菲尼迪</option>17         </optgroup>18     </select>19 </form>

 

　　5b7a15bed8615d1b843806256bebea72 标签一个重要属性 label 用于为选项组规定描述。

 

6、按钮

　　在表单中有两种按钮可以使用，分别为：提交按钮和重置按钮。还有一种按钮叫做点击按钮。

　　(1)、点击按钮

　　type="button" 定义一个可点击的按钮，在用户点击按钮时启动一段 JavaScript。

1 <input type="button" value="按钮" onclick="show()">2 <script>3 function show(){4     alert("Hello world!");5 }6 </script>

 

　　(2)、提交按钮

　　当用户需要提交表单信息到服务器时，需要用到提交按钮。type="submit" 用于定义提交按钮。

1 <form method="post" action="demo.php">2     <label for="urse">用户名：</label>3     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>4     <label for="password">密　码：</label>5     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>6     <input type="submit" value="提交信息">7 </form>

 

　　button 和 submit 都是定义一个按钮，不同的是 button 只是一个普通的按钮，主要用于绑定事件，如果不给其绑定事件，那么点击按钮不会有任何反应。而 submit 则是提交按钮，主要用于提交表单，传送数据，如果给 submit 绑定事件，那么点击按钮触发事件的同时，也会提交表单。

　　(3)、重置按钮

　　当用户需要重置表单信息到初始时的状态时，比如用户输入信息后，发现输入错误，那么可以使用重置按钮使输入框恢复到初始状态。只需要把 type 设置为 "reset" 就可以。

1 <form method="post" action="demo.php">2     <label for="urse">用户名：</label>3     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>4     <label for="password">密　码：</label>5     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>6     <input type="submit" value="提交信息">7     <input type="reset" value="重置信息">8 </form>

　　type="reset" 用于定义一个重置按钮，需要谨慎使用该按钮，当用户点击重置按钮后，所有表单值都会恢复到默认值，这对于用户来说，如果不慎点击了重置按钮将是一件十分令人恼火的事。

　　在 HTML 中还有一种创建按钮的方法就是使用 bb9345e55eb71822850ff156dfde57c8 标签。该元素与使用 d5fd7aea971a85678ba271703566ebfd 元素创建的按钮之间的不同之处就在于：使用 button 元素创建的按钮，在该元素内部可以放入内容，比如文本或图像，也就是该元素可以使用多媒体内容，bb9345e55eb71822850ff156dfde57c8 与 65281c5ac262bf6d81768915a4a77ac0 标签之间的所有内容都是按钮的内容。该元素也可以定义点击按钮、提交按钮和重置按钮。但是他的缺点就是：不同的浏览器对 bb9345e55eb71822850ff156dfde57c8 元素的 type 属性使用不同的默认值，因此要始终为 bb9345e55eb71822850ff156dfde57c8 元素规定 type 属性，不同浏览器可能会提交不同的按钮值，也就是浏览器得到的 value 值不同，存在兼容性问题。所以要使用 d5fd7aea971a85678ba271703566ebfd 元素在 HTML 表单中创建按钮。

 

7、input 元素属性和其他输入类型

　　除了前边提到的一些属性外，input 元素还有一些重要属性，以及 HTML5 新增加的属性。

　　readonly 属性规定输入字段是只读的。该属性是一个布尔值。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止，比如选中了一个复选框。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

　　size 属性规定以字符数计的 d5fd7aea971a85678ba271703566ebfd 元素的可见宽度。size 属性适用于下面的 input 类型：text、search、tel、url、email 和 password。如需规定 d5fd7aea971a85678ba271703566ebfd 元素中允许的最大字符数，需要使用 maxlength 属性。

　　以下是 HTML5 中的新属性：

　　autocomplete="on|off" 属性规定输入字段是否应该启用自动完成功能。默认值为 on，规定用户启用自动完成功能，off 则表示禁用。注意：autocomplete 属性适用于下面的 d5fd7aea971a85678ba271703566ebfd 类型：text、search、url、tel、email、password、date pickers(日期选择器)、range 和 color。

　　multiple 属性规定允许用户输入到 d5fd7aea971a85678ba271703566ebfd 元素的多个值。该值是一个布尔值，注意：multiple 属性适用于以下 input 类型：email 和 file。

　　pattern 属性规定用于验证 d5fd7aea971a85678ba271703566ebfd 元素的值的正则表达式。可以使用使用全局的 title 属性来描述模式以帮助用户。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

　　required 属性规定必需在提交表单之前填写输入字段。该属性是一个布尔值，required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

 

　　下面是 input 元素的其他输入类型：

　　(1)、图像作为按钮

　　type="image" 用于定义图像作为提交按钮，如下：

<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">

　　上面代码中的 3 个属性都只针对 type="image"，src 属性规定显示为提交按钮的图像的 URL。alt 属性定义图像输入的替代文本。width 和 height 规定 d5fd7aea971a85678ba271703566ebfd元素的宽度/高度。

 

　　(2)、隐藏字段

　　type="hidden" 用于定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

1 <form method="post" action="demo.php">2     姓名: <input type="text" name="user"><br/>3     <input type="hidden" name="country" value="China">4     <input type="submit" value="提交">5 </form>

 

　　(3)、选择文件

　　type="file" 用于定义文件选择字段和 "浏览..." 按钮，供文件上传。

1 <form method="post" action="demo.php">2     选择一个文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>3     <input type="submit" value="提交">4 </form>

　　accept 属性仅适用于 a2dc5349fb8bb852eaec4b6390c03b14。该属性规定了可通过文件上传提交的服务器接受的文件类型。如需要多个文件类型，每个值可以使用逗号分隔。注意：不要将该属性作为验证工具，应该在服务器上对文件上传进行验证。

 

以下都是 input 元素在 HTML5 中的新类型：

　　(4)、Email

　　type="email" 用于定义邮箱地址的字段，当提交表单时会自动对 email 字段的值进行验证。

Email: <input type="email" name="usre">

 

　　(5)、电话号码

　　type="tel" 用于定义用于输入电话号码的字段。

电话号码: <input type="tel" name="mobile">

 

　　(6)、拾色器

　　type="color" 用于定义从拾色器中选取颜色。

选择你喜欢的颜色: <input type="color" name="likecol">

 

　　(7)、搜索字段

　　type="search" 定义用于输入搜索字符串的文本字段，比如站内搜索。

查查看: <input type="search" name="lookup">

　　目前，浏览器对于该类型的支持不是很好。

 

　　(8)、URL

　　type="url" 定义用于输入 URL 的字段。

添加你的主页: <input type="url" name="homepage">

 

　　(9)、数字字段

　　type="number" 定义用于输入数字的字段，可以设置可接受数字的限制。

数量 ( 1 到 5 之间): <input type="number" name="num" min="1" max="5">

　　min 和 max 属性可用于规定 d5fd7aea971a85678ba271703566ebfd 元素的最小/最大值。value 属性可规定默认值。step 属性可规定 d5fd7aea971a85678ba271703566ebfd 元素的合法数字间隔。实例：如果 step="3"，则合法数字应该是 -3、0、3、6，以此类推。该属性可以与 min 和 max 属性配合使用，以创建合法值的范围。

 

　　type="range" 定义用于精确值不重要的输入数字的控件，比如 Slider.js，一个轻量级图片播放控件。也可以设置可接受数字的限制。用来规定限制的属性同 number 类型相同。

 

　　(10)、日期

　　type="time" 定义用于输入时间的控件（不带时区）。

　　type="date"  定义 date 控件。

　　type="datetime" 定义 date 和 time 控件（带有时区）。

　　type="datetime-local" 定义 date 和 time 控件（不带时区）。

　　type="month" 定义 month 和 year 控件（不带时区）。

　　type="week" 定义 week 和 year 控件（不带时区）。

 

8、其他表单标签

　　(1)、表单边框

　　2b5469ab79cf842344327415c3b3bb95 标签定义围绕表单中元素的边框。e911751791aa3ba95dc724e2fb905976标签用于定义 fieldset 元素的标题。

1 <form method="post" action="demo.php">2     <fieldset>3         <legend>个人信息:</legend>4         姓名: <input type="text"><br/>5         籍贯: <input type="text"><br/>6         邮箱: <input type="email"><br/>7         家庭住址: <input type="text">8     </fieldset>9 </form>

 

在 HTML5 中还增加了3个新标签：

　　(2)、fc86e7b705049fc9d4fccc89a2e80ee3

　　fc86e7b705049fc9d4fccc89a2e80ee3 标签规定了 input 元素可能的选项列表。如下：

 1 <form method="post" action="demo.php"> 2     <input list="browser" name="explorer" autofocus> 3     <datalist id="browser"> 4         <option value="IE"> 5         <option value="Firefox"> 6         <option value="Chrome"> 7         <option value="Safari"> 8         <option value="Opera"> 9     </datalist>10     <input type="submit">11 </form>

 

　　fc86e7b705049fc9d4fccc89a2e80ee3 标签被用来为 d5fd7aea971a85678ba271703566ebfd 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。注意：必需使用 d5fd7aea971a85678ba271703566ebfd 元素的 list 属性来绑定 fc86e7b705049fc9d4fccc89a2e80ee3 元素。该属性引用 fc86e7b705049fc9d4fccc89a2e80ee3 元素，其中包含 d5fd7aea971a85678ba271703566ebfd 元素的预定义选项，该属性值为绑定到 d5fd7aea971a85678ba271703566ebfd 元素的 datalist 的 id。

　　autofocus 属性用于规定当页面加载时 d5fd7aea971a85678ba271703566ebfd 元素应该自动获得焦点。

 

　　(3)、be6d67dae90cc1ad6469079e163d0939

　　be6d67dae90cc1ad6469079e163d0939 标签作为计算结果输出显示，比如执行脚本的输出。如下：

1 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)">2     0<input type="range" id="x" value="50">1003     +<input type="number" id="y" value="50">=4     <output name="sum" for="x y"></output>5 </form>

 

　　该标签有一个重要属性 for 规定一个或多个元素的 id 列表，以空格分隔，用于描述计算中使用的元素与计算结果之间的关系。name 属性定义对象的唯一名称，在表单提交时使用。

 

　　(4)、aa983b9eb8086376f1f6481364a02e5a

　　aa983b9eb8086376f1f6481364a02e5a 规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。如下：

1 <form method="post" action="demo.php">2     用户名: <input type="text" name="usre"><br/>3     加　密: <keygen name="security" keytype="rsa">4     <input type="submit">5 </form>

 

　　该标签有一个重要属性 keytype 用于定义密钥的安全算法，该属性规定应该使用哪种密钥生成算法，安全算法有3种：rsa为默认，规定 RSA 安全算法，RSA 密钥强度可由用户选择。dsa 规定 DSA 安全算法，DSA 密钥长度可由用户选择。ec 规定 EC 安全算法，EC 密钥强度可由用户选择。注意：不同的浏览器对密钥生成算法的支持会有所变化。