HTML フォームタグの概要

    最近研究 form标签，有一些小心得写下来与大家分享分享，共勉。在小结的最后有一个form表单的小例子，可以作为参考。                                                    -----DanlV

ログイン後にコピー

form是HTML的一个极为重要的功能标签之一。

ログイン後にコピー

入力フィールド input

input type 属性には、次の属性値があります:
1.button ボタン (詳細は次)
2.file はファイルに使用されます選択
3.hidden 隠しフィールド、隠し操作を実現できます
4.text はテキスト入力に使用されます
5.password はパスワード入力に使用されます
6.radio ラジオボタン、name 属性はグループと同じです
7. checkbox 複数選択ボタン。 name 属性は、
8.image 画像フォーム送信ボタン
9.reset リセットフォームボタン
10.submit フォーム送信ボタン
alt 属性のグループで同じであり、代替を定義します。ボタンが使用されるときの画像のテキスト
src 属性、ボタンが画像の場合の画像のリンクアドレスを定義します
checked 属性、デフォルトのオプション <input type=" を定義しますradio" name="" selected>checked 値は true または false であるか、checked として直接記述することもできます <input type="radio" name="" checked>checked的值为true或false，也可以直接写成checked
disabled属性，禁用当前输入域（用法如checked）
readonly属性，对当前输入域只读，实际作用与disabled相同，但是展现出来的效果不一样（用法如checked）
maxlength属性，定义输入域字符的最大长度
name属性，定义当前的输入域的名字
value属性，定义当前输入域的默认值

文本输入区textarea

rows属性，规定可见行数
cols属性，规定可见列数
disabled属性，禁用当前文本输入区
name属性，当前文本区的名字
readonly属性，当前文本区域只读

按钮button

type类型一共有三种：
1.type="button"普功通功能按钮
2.type="submit"提交form表单功能按钮
3.type="reset"重置form表单功相关属能按钮
disabled属性，禁用此按钮
name属性，按钮的名字
value属性，按钮上显示文本内容的默认值

下来菜单select

相关属性：
1.disabled属性，禁用该菜单
2.multiple属性，规定可同时选中多项
3.name属性，下拉列表的名字
4.size属性，菜单中可见项目的数目
<optgroup>标签</optgroup>，定义下拉列表的选项分组，属性为：
5.label属性，定义选项组的标记（名字），必要属性
6.disabled属性，禁用
<optinon></optinon>属性，定义下拉列表中的选项（此标签在<optgroup></optgroup>标签）中，属性为：
1.disabled属性，禁用
2.label属性，定义当使用

表单中的标记`<label></label>`

为了是输入更为人性化，提高用户的体验度，再点击提示文字的时候光标自动聚焦到输入的位置，使用此标签。有两种使用方法：

<label for="user"></label> <inpu t type="text" name="user"></inpu>此方式使用label的for属性，值制定输入区域的name
<label> <input type="text" name="user"></label>
将input直接放入label中，不需要使用for属性，推荐使用。
---

表单中相关元素分组fieldset

将表单中相关的元素进行分组，使用`<legend></legend>`

disabled 属性は、現在の入力フィールドを無効にします (使用法は selected と同様です)

HTML フォームのいくつかの使用法を要約する

🎜現在の入力フィールドに対して読み取り専用となる readonly 属性実際の機能は無効と同じですが、表示の効果が異なります (チェックなどの使用方法) 🎜🎜🎜🎜 入力の最大長を定義する maxlength 属性フィールド文字🎜🎜🎜🎜name属性、現在の入力フィールドの名前を定義します🎜🎜🎜🎜value属性、現在の入力フィールドの名前を定義しますデフォルト値🎜🎜

🎜テキスト入力エリアtextarea🎜 🎜🎜🎜rows 属性、表示される行の数を指定します🎜🎜🎜🎜🎜cols 属性、表示される列の数を指定します🎜🎜🎜🎜🎜disabled 属性、現在のテキスト入力領域を無効にします🎜🎜🎜🎜name 属性、名前現在のテキスト領域 🎜🎜🎜🎜readonly 属性、現在のテキスト領域は読み取り専用です 🎜🎜

🎜button button🎜🎜🎜🎜type 合計 3 つのタイプがあります: 🎜1.type=" button" 通常の機能ボタン 🎜2.type="submit" フォーム送信フォーム機能ボタン 🎜3.type="reset" フォームフォーム機能関連属性ボタン 🎜🎜🎜🎜🎜disabled 属性、このボタンを無効にする 🎜🎜🎜🎜name 属性、ボタンの名前🎜🎜🎜🎜value属性、ボタンに表示されるテキストコンテンツのデフォルト値🎜🎜

🎜Down menu select🎜🎜🎜🎜関連属性: 🎜1.disabled属性、メニューを無効にします 🎜2.multiple 属性、複数の項目を同時に選択できることを規定します 🎜3.name 属性、ドロップダウンリストの名前 🎜4.size 属性、メニューに表示される項目の数 🎜 🎜🎜🎜<optinon></optinon> 属性は、ドロップダウンリストのオプションを定義します (このタグは <optgroup></optgroup> タグ内にあります)。属性は次のとおりです。 🎜1.disabled 属性、無効にする 🎜2. label 属性、<label></label> 形式で 🎜🎜

🎜マークを使用するときに定義します🎜🎜より使いやすく、ユーザーエクスペリエンスを向上させるには、[テキストを要求するときに、このタグを使用する] をクリックすると、カーソルが入力位置に自動的にフォーカスされます。使用方法は 2 つあります: 🎜🎜🎜🎜<label for="user"></label> <input type="text" name="user">このように、 label の for 属性を使用して入力領域の名前を指定します🎜🎜🎜🎜

<label> <input type="text" name="user"></label> code>🎜 入力はラベルに直接配置されます。 for 属性を使用する必要はありません。これをお勧めします。 🎜---🎜🎜フォーム内の関連要素のフィールドセットをグループ化します🎜🎜🎜フォーム内の関連要素をグループ化し、<legend></legend> タグを使用してグループ タイトルを定義します。関連する例については、最後のコードを参照してください。 🎜🎜コード例🎜🎜🎜🎜        
ログイン後にコピー

            
                天下第一争霸赛    
                    
             门派： 
            
密码：     
            
上传你的请柬： 
            
选武器： 刀
                        剑
                        枪
                        鞭
            
挑战对手： 梅超风
                            洪七
                            金毛狮王谢逊
                            张三丰
            
 选择你的门派：