HTMLフォーム:基本に戻る

フレームワークとライブラリをちょっと忘れましょう.今日、我々はちょうど話をするつもりです<form /> 要素といくつかのDOMでそれを行うことができます.
歯の中で少し長くなっているウェブDEVのために、あなたは多分これのほとんどをよく知っています、しかし、より新しいDEVSのために、これはあなたにニュースかもしれません.いずれにせよ、我々はフォームで古い学校に行くつもりだので、バックル.

新しいDOM APIでquerySelector and querySelectorAll , セレクタを介してフォームにアクセスできます.document.querySelector(‘form’); . あなたはまた、直接からのフォームにアクセスすることができます知っていますかdocument ? があるHTMLCollections of forms available via document.forms . さあ、お気に入りのエディタでdevツールを開きましょう.きれいなきちんとしたええ?
それで、我々がそうしていると言いましょうamazon.ca .

次のような形式があります.

<form class="nav-searchbar" name="site-search">
...
</form>

ので、あなたは知っているdocument.forms オブジェクト.devのツールを覗き見しましょう.
document.forms[0] 私たちのフォームを見つけます、そして、1つの他のフォームがページにありますdocument.forms . があるsite-search and ue_backdetect . 我々が我々のフォームの上でマークアップを見るならば、我々はそれがあるのを見ますname 値を持つ属性’site-search' . それは1つの余分なプロパティの1つですdocument.forms . 確かに.document.forms[‘site-search’] フォームを与えます.我々がそうするならばdocument.forms[0] === document.forms[‘site-search’] 我々のdevツールのコンソールでは、それがtrueを返すのを見ます.

まだキャッチされていない場合は、DOMで表示される順序を表すインデックスを介してフォームにアクセスできることを意味しますが、フォームのname 属性.

大丈夫、もっと多くの人々がいる.コンソールで以下を実行することによって、我々のフォームへのリファレンスを得ましょう.const siteSearchForm = document.forms['site-search'] .
では、どのようなプロパティが利用可能かを見てみましょう.

ので、いくつかのプロパティが表示されますaction , URLGET/POST しかし、リストの下に行くにつれてelements . うーん、何だろう?😉 dev - toolsコンソールにアクセスすると、次のようになります.

何?すべてのフォームの入力がそこにある!それは右の人々は、すべてのアクセスをしている<input /> s<textarea /> このプロパティを介してS等.かなりクールええ?それだけでなく、フォームの入力がname 属性、我々は我々がしたのと同じことを行うことができますdocument.forms . フォームの入力やインデックス名にアクセスできます.siteSearchForm.elements[‘field-keywords’] .
したがって、フォームとフォームの入力にアクセスすることはdocument 経由で document.forms プロパティ.
つの最後の楽しい事実.各フォーム要素はform への参照であるプロパティ<form /> フォーム要素が格納されているDOMノード.

このDOMスローバック木曜日を楽しんでください.