HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLドロップダウン

HTMLの知識を広げるにつれ、私たちが検討し始める必要のある多くのことの1つは、私たちが作成するものが私たちのページを使用する人々の体験にどのように影響するかです。私たちが見なければならないことの1つは、Webページの構成がエクスペリエンスをどのように変えるかということです。乱雑すぎるページは、クライアントがページに留まり、サイトにいる間に意図したことを完了することを決定するかどうかに間違いなく影響します。

サイトでフォームを整理する方法の1つは、ラジオボタンの入力またはチェックボックスを独自のドロップダウンにネストして、ユーザーがリストをスクロールして1つのオプションを見つけることができるようにすることです。

この記事では、HTMLを活用して<select>を作成する方法を学習します。 フォーム要素として使用されるドロップダウン。ナビゲーションバーのドロップダウンメニューがどのように作成されるかを確認したい場合は、CSSドロップダウンを確認してください。

基本構造

HTMLドロップダウンメニューの基本構造は、<select>です。 グループ化に名前を付けて識別する要素、および複数の<option> ドロップダウンのコンテンツを構成するタグ。

まず、そのドロップダウンのスケルトンを作成しましょう。 <select>を書き出す IDと名前が「baseball-teams」の要素。スタイリングを調整したい場合は、IDが役立ちます。 name属性は、チームが選択された後にフォームデータを使用し、その情報をサーバーに送信する場合に役立ちます。 

<!DOCTYPE html>
<html>
<body>
 
<h1>The select element</h1>
 
<p>The select element is used to create a drop-down list.</p>
 
<form onsubmit=handleSubmit(event)>
 <label for="baseball-teams">Choose a baseball team:</label>
 <select id="baseball-teams" name="baseball-teams">
         <option selected value="">Select Team</option>
         <option value="Arizona Diamondbacks">Arizona Diamondbacks</option>
         <option value="Atlanta Braves">Atlanta Braves</option>
         <option value="Baltimore Orioles">Baltimore Orioles</option>
         <option value="Boston Red Sox">Boston Red Sox</option>
         <option value="Chicago Cubs">Chicago Cubs</option>
         <option value="Chicago White Sox">Chicago White Sox</option>
         <option value="Cincinnati Reds">Cincinnati Reds</option>
         <option value="Cleveland Indians">Cleveland Indians</option>
         <option value="Colorado Rockies">Colorado Rockies</option>
         <option value="Detroit Tigers">Detroit Tigers</option>   
         <option value="Houston Astros">Houston Astros</option>   
         <option value="Kansas City Royals">Kansas City Royals</option>
         <option value="LA Angels">Los Angeles Angels of Anaheim</option>  
         <option value="LA Dodgers">Los Angeles Dodgers</option>
         <option value="Miami Marlins">Miami Marlins</option>
         <option value="Milwaukee Brewers">Milwaukee Brewers</option>
         <option value="Minnesota Twins">Minnesota Twins</option>
         <option value="NY Mets">New York Mets</option>
         <option value="NY Yankees">New York Yankees</option>
         <option value="Oakland Athletics">Oakland Athletics</option>
         <option value="Philadelphia Phillies">Philadelphia Phillies</option>
         <option value="Pittsburgh Pirates">Pittsburgh Pirates</option>
         <option value="San Diego Padres">San Diego Padres</option>
         <option value="San Francisco Giants">San Francisco Giants</option>
         <option value="Seattle Mariners">Seattle Mariners</option>
         <option value="STL">St. Louis Cardinals</option>
         <option value="Tampa">Tampa Bay Rays</option>
         <option value="TX">Texas Rangers</option>
         <option value="Toronto" value="LA Angels">Toronto Blue Jays</option>
         <option value="Washington">Washington Nationals</option>
       </select>
 <br><br>
 <input type="submit" value="Submit">
</form>
 
<p>Click the "Submit" button and the form's data will be shown below.</p>
<h3></h3>
<script async defer>
 
 const handleSubmit = (event) => {
   event.preventDefault()
   let select = document.getElementById('baseball-teams');
   let option = select.options[select.selectedIndex];
   let result = document.querySelector('h3');
   result.textContent = option.text;
 }
</script>
</body>
</html>

この時点でコードを実行すると、非常に基本的なドロップダウンが表示されます。最初のオプションは、ドロップダウンオプションの値を示します。この場合、彼らは私たちに野球チームを選んでほしいと思っています。ドロップダウンをクリックすると、メジャーリーグのすべてのチームの値が表示されます。

値を選択すると、その値が<select>の選択されたインデックスに割り当てられます。 。これは、データをどう処理するかを決定するときに、あらゆる種類のロジックに役立つものです。選択したインデックスの名前と値を知ることは、そのデータで何かをしたい場合に非常に重要です。

バックエンドを学習するときに、フォームデータの処理方法について詳しく学習します。ドキュメントの下部にあるJavaScriptで何が起こっているかについて心配する必要はありません。ページのドロップダウンを取得するために何をすべきかだけを心配してください– <select> および<option> 要素。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。



結論

この記事では、フォームのドロップダウンメニューを作成する方法について学びました。 <select>を使用する および<option> 複数のオプションから選択する方法をユーザーに提供する要素。ここで基本のコツをつかんだら、<optgroup>を調べてください。 します！


  1. HTMLサイズ属性

    HTMLサイズ属性は、選択で表示されるオプション/文字の数を表します および入力 HTML要素。 構文 以下は構文です- <tagname size=”number”></tagname> HTMLサイズ属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;     &nb

  2. HTMLオプション値属性

    HTMLオプション値属性は、フォームがHTMLドキュメントで送信されたときにサーバーに送信されるオプションHTML要素の値を定義します。 構文 以下は構文です- <option value=”text”></option> HTMLオプション値の属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100