<p class="sycode"> <strong> フォームとフォーム コントロールの主な機能は、ユーザー エクスペリエンスを収集することです。ユーザーがフォームを送信すると、ユーザーが入力したコンテンツがリクエスト パラメーターとしてリモート サーバーに送信されます。 <br> </strong> </p> <li><strong>1、フォーム タグ </strong></li> <form>: この要素はビジュアル インターフェイスを生成しませんが、他のコントロールをこのタグに配置する必要があります。よく使用される属性: <br> action: この属性は必須であり、スタンドアロン フォームの確認ボタンが使用されるときにフォームが送信されるアドレスを指定するために使用されます。絶対アドレスまたは相対アドレスを指定できます。 <br> メソッド: フォームを送信するときに送信するリクエストのタイプ (get または post) を指定するために使用されます。get と post の違いについては http ブログで説明されているため、ここでは詳しく説明しません。 <br> enctype: フォームコンテンツをエンコードするときに使用される文字セットを指定するために使用されます。デフォルトでは、フォーム データは「application/x-www-form-urlencoded」としてエンコードされます。つまり、すべての文字はサーバーに送信される前にエンコードされます (スペースは「+」プラス記号に変換され、特殊文字は ASCII に変換されます)。 HEX 値) <br> この属性には 3 種類の属性値があります: <br> application/x-www-form-urlencoded: 送信前にすべての文字をエンコードします (デフォルト) <br> multipart/form-data: 使用する場合、文字をエンコードしませんファイル アップロード コントロール この値は、フォームの作成時に使用する必要があります。 <br> テキスト/プレーンスペースは「+」プラス記号に変換されますが、特殊文字はエンコードされません。 <br> 名前: フォームの一意の名前。ID の一貫性を保つことをお勧めします。 <br> ターゲット: URL、_self、_blank、_top、_parent を開く方法。 <br> このフォーム タグに関して、強調する必要があるのは、フォーム コントロールが対応するリクエスト パラメーターにどのように変換されるかということです。具体的なルールは次のとおりです。 <br> 1. name 属性を持つ各フォーム コントロールは、リクエスト パラメーターに対応します。 name 属性のないコントロールは生成されません。複数のフォーム コントロールが name 属性値を繰り返す場合、リクエスト パラメーターは 1 つだけ生成されますが、このパラメーターには複数の値があります。 <br> 2. フォームコントロールの name 属性はリクエストパラメータ名を指定し、value はリクエストパラメータの値を指定します。 <br> 3. フォーム コントロールで disabled="disabled" 属性を設定すると、このフォーム コントロールはリクエスト パラメーターを生成しなくなります。 <br> <br> <li><strong>2、input タグ </strong></li> <input> 要素は、フォーム コントロールの中で最も汎用性が高く、このタグを通じて次の input 要素が生成されます。このタグは空のタグです。 <br> 1. 単一行のテキストボックス: type="text" <br> 2. パスワード入力ボックス: type="password" <br> 3. 隠しフィールド: type="hidden" <br> 4. ラジオボタン: type="radio" <br> 5チェックボックス: type="checkbox" <br> 6. 画像フィールド: type="image" <br> 7. ファイルアップロードフィールド: type="file" <br> 8. 送信、リセット、アクションなしボタン: type="submit"、type ="reset",type="button" <br> <input> この要素では、id、style、class などのコア属性を指定でき、onclick、onfocus、onblur などのイベント属性も指定できます。以下のタイプもあります: <br> 1. チェック済み、ラジオと複数選択が選択されているかどうかの設定に使用されます <br> 2、無効化、この要素を無効にするために使用されます <br> 3、maxlength、入力できる最大文字数の指定に使用されますテキストボックス <br> 4、readonly、読み取り専用モード、変更できません <br> 5、size、要素の幅を指定します <br> 6、src、画像フィールドに表示される画像フィールドのURL <br> 7、align、配置画像フィールド <br> 以下は、上記の要素を含む HTML です: <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>表单相关标签</title></head><body><form action="" method="get">单行文本框:<input type="text" name="userName" id="userName" /><br />不能编辑的文本框:<input type="text" name="userName1" id="userName1" readonly="readonly" /><br />密码框:<input type="password" name="passWord" id="passWord" /><br />隐藏域:<input type="hidden" name="linkin_id" id="linkin_id" /><br />单选:<input type="radio" name="age" id="age1" value="男" />男<input type="radio" name="age" id="age2" value="女" />女<br />多选:<input type="checkbox" name="age1" id="age3" value="男" />男<input type="checkbox" name="age1" id="age4" value="女" />女<br />文件上传域:<input type="file" /><br />图像域:<input type="image" src="" /><br />4个按钮:<input type="submit" value="提交" name="button1" /><input type="submit" value="提交" name="button2" disabled="disabled" /><input type="reset" value="重置" name="button3" /><input type="button" value="无动作" name="button4" /></form></body></html></pre><div class="contentsignin">ログイン後にコピー</div></div> <br> <li><strong>3 、リスト ボックスとドロップダウン メニュー</strong></li> この要素は、リスト ボックスとドロップダウン メニューを作成するために使用されます。 <option> と組み合わせて使用します。各 <option> はリスト項目またはメニュー項目を表します。頻繁に使用される 2 つの属性 (disabled) は、リスト ボックスとドロップダウン メニューを無効にするために使用されます。 <br> multiple: 複数の項目を選択するかどうかを設定するために使用されます。 <br> <select> がリスト ボックスを生成するかドロップダウン メニューを生成するかは、上記の 2 つの要素によって決定されることに注意してください。サイズまたは倍数が指定されている場合はリスト ボックスが生成され、それ以外の場合はドロップダウン メニューが表示されます。 <br> <オプション>: オプション。 value はリクエストパラメータ値を表し、disabled はこのオプションが無効かどうか、selected はこのオプションが選択されているかどうかを示します <br> <optgroup>: オプショングループ。 label (必須)。このオプション グループのラベルを指定するために使用されます。 <br> 以下は、上記のタグを含む HTML です: <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>下拉相关标签</title></head><body> <form action="" method="get"> 下拉: <select> <option value="LinkinPark">林肯</option> <option value="NightWish">夜愿</option> </select> 列表框1: <select multiple="multiple"> <option value="LinkinPark">林肯</option> <option value="NightWish">夜愿</option> </select> 列表框2: <select multiple="multiple"size="10"> <optgroup label="名字"> <option value="LinkinPark">林肯</option> <option value="NightWish">夜愿</option> </optgroup> <optgroup label="国家"> <option value="LinkinPark">美国</option> <option value="NightWish">芬兰</option> </optgroup> </select> </form></body></html></pre><div class="contentsignin">ログイン後にコピー</div></div> <br> <br> <br><li>4、textarea を使用してテキスト領域を定義します<strong></strong> <textarea>: HTML で複数行のテキスト領域を定義するために使用されます。2 つの属性が必要です。colsおよび行。テキストフィールドの幅と高さを指定するために使用されます。複数行のテキスト フィールドは特別で、通常のイベント属性に加えて、テキスト フィールド内のコンテンツが選択されたときにイベントを示すために使用される onselect 属性も指定できます。 </li> 与单行文本框相同的是,<textarea>元素也应该指定name属性,该属性将作为textarea的请求参数名,与单行文本框不同的是,<textarea>不能指定value属性,<textarea></textarea>之间的内容将作为所对应的请求参数的参数值。 <br> 关于这个标签还是经常会用到的,在以前我写表单的时候,将单行的文本框拉长拉宽,但是我们在输入的时候也只能是一行,不能换行的,忽忽。 <br> 以下是包含这个标签的一份html: <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>多行文本框相关标签</title></head><body> <form action="" method="get"> 单行文本框:<input type="text" size="20" height="20" /><br /> 多行文本框:<textarea rows="10" cols="20"></textarea> </form></body></html></pre><div class="contentsignin">ログイン後にコピー</div></div> <br> <li><strong>5,使用label定义标签</strong></li> <label>用于在表单元素中定义标签,这些标签只是对其他可以生成请求参数的控件来做说明的,本身是不会产生请求参数的,所以不要为<label>元素指定value的属性值。 <br> 从表面上看,<label>元素只是输出普通文本,其实他最大的作用就是,当我们点击<label>生成的文本时,他说关联的表单控件将自动获得焦点。 <br> 让标签和表单控件关联有2种方式: <br> 1,隐式使用for属性:设置<label>标签的for属性指向所关联表单控件的id属性值。 <br> 2,显式关联:将普通文本,表单控件丢在<label></label>标签内部就可以了。关于这2种方式推荐使用第一种,也就是使用for来隐式关联,因为后面一种可能在ie下不兼容。 <br> 以下是包含上面标签的一份html: <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>label相关标签</title></head><body> <form action="" method="get"> <label for="huhu">单行文本框:</label> <input type="text" size="20" height="20" id="huhu" /><br /> <label>多行文本框:<textarea rows="10" cols="20"></textarea></label> </form></body></html></pre><div class="contentsignin">ログイン後にコピー</div></div> <li><strong>6,使用button定义按钮</strong></li> <botton>元素用于定义一个按钮,在这个标签的内部可以包含普通的文本,文本格式化标签,图像等内容,这也就是<button>和<input>按钮的不同之处。 <br> 这个标签使用不多,最多就是在一个按钮做成图像格式的才会用到。以下是一份html: <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre name="code" class="sycode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>button相关标签</title></head><body> <form action="" method="get"> <button type="submit" ><img alt="huhu" src="img/NightWish.jpg" /></button> </form></body></html></pre><div class="contentsignin">ログイン後にコピー</div></div> <br> <br>