HTML フォームの簡単な使用 markup_html/css_WEB-ITnose

1.

...

フォームタグ

基本構文形式:

<form action="url" method="get|post" name="name" onSubmit="" target=""></form>

属性の説明:

action 属性: プログラムの URL アドレスを指定するように属性を変更します。フォームデータを処理します。

method 属性: 属性を変更して、サーバーにデータを送信する方法を指定します。 get と post の 2 つの属性値があります

name 属性: カスタマイズ可能なフォームの名前を指定します

onSubmit属性：指定当用户单击提交按钮时触发的事件。

target属性：指定输入数据结果显示在哪个窗口中，_blank标示在新窗口中打开目标文件；_self表示在同一个窗口中打开，该项一般不用设置；_parent表示在上一级窗口中打开，一般使用框架页时经常使用；_top表示在浏览器的整个窗口中打开，忽略任何框架。

2. フォーム入力タグ

が最も頻繁に使用されます。 form タグの基本的な構文形式は次のとおりです:

<input type="image" disabled="disabled" checked="checked" width="digit" maxlength="digit" readonly="" size="digit" src="Uri" usemap="Uri" alt="" name="checkbox" value="checkbox">

属性値:

type: 追加される入力フィールドのタイプを指定するために使用されます: テキスト、パスワード、ファイル、ラジオ、チェックボックスなど。

無効: 指定された入力フィールドは使用できません。つまり、フィールドは灰色になり、その属性値は空にするか無効として指定できます

checked: 入力フィールドが選択されているかどうかを指定し、type 属性値が radio の場合を使用しますと checkbox

width: 入力フィールドの幅を指定し、type 属性値を画像として使用します

height: 入力フィールドの高さを指定し、type 属性値を画像として使用します

maxlength: 入力できる単語数を指定します、 type がテキストとパスワードの場合に使用され、デフォルトでは単語制限はありません

readonly: 読み取り専用に設定され、属性値は空または読み取り専用にできます

size: 画像ソースを指定します。type 属性値が image の場合に有効です

usemap: type 属性値が image の場合、画像のホットスポット マップを設定します。 有効

alt: 画像が表示できない場合に表示するテキストを指定するために使用されます。 type 属性値が image

name の場合に有効です。 : 入力フィールドの名前を指定します

value: タイプがチェックボックスおよびラジオを使用する場合、入力フィールドのデフォルトのデータ値を指定します。ラジオを使用する場合は省略できず、指定された値はデータ項目が選択されたときの値になります。 type 属性値が button、reset、または submit の場合、ボタンに表示されるテキストを指定します。

3. ...構文:

rrree

属性:

name: リスト ボックスの名前

size: スクロール バーをドラッグしてビューを超えて表示されるオプションの数

disabled: 指定されたリスト ボックスは使用できません

multiple: 複数行のリストを作成するために使用されます

4. 複数行のテキスト マーク<p> <br> 基本構文形式: </p> <p></p> <pre name="code" class="sycode"><select name="name" size="digit" multiple="multiple" disabled="disabled"></select></pre> <p> 属性値: </p> <p> </p>name : 複数行テキストボックスの名前を指定します。フォーム送信後、サーバー側がフォームデータを取得するときに適用されます <br> <p>cols: 複数行テキストボックスに表示される列数 (幅) を指定します </p> <p>rows:複数行のテキスト ボックスによって表示される行数 (高さ) を指定します </p> <p>disabled: 複数行のテキスト ボックスが使用できない (グレー表示される) ことを指定します </p> <p>readonly: 現在の複数行のテキスト ボックスが読み取り可能であることを指定します</p> <p>warp のみ: 選択したテキストを自動的に折り返すかどうかを設定します: オプションの値: ハード: デフォルト値、自動行折り返し、改行文字はサーバーに送信されるときに同時に送信されます。 ソフト: 自動行折り返しですが、改行は行われます。送信されません; off": 自動行折り返しなし </p> <p></p> <p> </p> 簡単な例を以下に示します: <p> <br></p> <pre name="code" class="sycode"><textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" warp="value">默认值</textarea></pre> <p> </p> <p></p> <br> <br> 著作権表示: この記事はブロガーによるオリジナル記事であり、複製は許可されていませんブロガー<p></p> <p class="sycode">の許可なし。</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="HTML5 アプリケーション Clock_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/272481.html">HTML5 アプリケーション Clock_html/css_WEB-ITnose</a></span><span>次の記事：<a class="dBlack" title="HTML5 アプリケーション Clock_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/272484.html">HTML5 アプリケーション Clock_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>