What's New Qiita

20200619のHTMLに関する記事は5件です。

  • 投稿日：2020-06-19T14:40:32+09:00

51歳（現52）からのプログラミング　備忘　formから配列を送ってクッキーに登録してリダイレクト

実用的なコードは、コメント欄にご投稿頂きました rfc828様 の素敵なコードをご参照ください（←おすすめ）

構成
sam1.php
sam2.php

sam1.php
<form action="sam2.php" method="post">
<input type="text" name="sam[]" value="<?= $_COOKIE['sam'][0] ?? 'no';?>">
<input type="text" name="sam[]" value="<?= $_COOKIE['sam'][1] ?? 'no';?>">
<button>send</button>
</form>

<?= $_COOKIE['sam'][int] ?? 'no';?>
条件演算子のNULL合体演算子を使ってます。
条件A　?? 条件B　// 条件Aがnullでなければ条件Aを実行、nullなら条件Bを実行

これで、クッキーにsam配列が登録されていれば、input欄に該当する値をセットだね。

sam2.php
<?php
$i=0;
foreach($_POST['sam'] as $v){
  setcookie("sam[$i]",$v);
  $i++;
}
header('Location:sam1.php');

POSTされた配列を、foreachで取り出して、クッキーにsam[]として登録ですね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-19T14:22:35+09:00

HTMLメモ

<!DOCTYPE html>



CookCamp






誰でも作れる簡単料理レシピ掲載サイト


        <form>
            <input type="text" name="search" placeholder="料理名・材料名で検索">
            <input type="submit" value="レシピ検索">
        </form>

        <div class="menu">
            <a href="#" class="menu_tag">新着レシピ</a>
            <a href="#" class="menu_tag">料理から検索</a>
            <a href="#" class="menu_tag">食材から検索</a>
            <a href="#" class="menu_tag">旬の料理特集</a>
            <a href="#" class="menu_tag">ランキング</a>
        </div>
    </div>
</header>
<div class="top_tag">
    <img src="mainView.jpg"><img>
</div>

<div class="large_block">
    <nav>
        <ul class="nav-top">
            <h3>料理別レシピ</h3>
            <div class="menu_list"><a href="#" ><li><img src="arrow.png" alt="矢印のアイコンです"><span>和食<span></li></a></div>
            <div class="menu_list"><a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>イタリアン</span></li></a></div>
            <div class="menu_list"><a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>フレンチ</span></li></a></div>
            <div class="menu_list"> <a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>中華</span></li></a></div>
            <div class="menu_list"> <a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>アジアン</span></li></a></div>
            <div class="menu_list"> <a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>エスニック</span></li></a></div>

        </ul>
       <ul class="nav-bottom">
            <h3>目的別レシピ</h3>
            <div class="menu_list"><a href="#" ><li><img src="arrow.png" alt="矢印のアイコンです"><span>お弁当<span></li></a></div>
            <div class="menu_list"><a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>簡単おかず</span></li></a></div>
            <div class="menu_list"><a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>ダイエット</span></span></li></a></div>
            <div class="menu_list"> <a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>ベビーフード</span></li></a></div>
            <div class="menu_list"> <a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>節約食材</span></li></a></div>
            <div class="menu_list"> <a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>アレルギー</span></li></a></div>
            <div class="menu_list"> <a href="#"><li><img src="arrow.png" alt="矢印のアイコンです"><span>シニア料理</span></li></a></div>

        </ul>
    </nav>

    <article>
        <div class="article-top">
            <div class="title">
                <h3>新着レシピ</h3>
            </div>
            <div class="form">
            <div class="newRecipes_form">
                <img src="newRecipes1.jpg" alt="季節菜の彩り前菜です">
                <p>季節菜の彩り前菜</p>
            </div>
            <div class="newRecipes_form">
                <img src="newRecipes2.jpg" alt="簡単かぼちゃスープです">
                <p>簡単かぼちゃスープ</p>
            </div>
            <div class="newRecipes_form">
                <img src="newRecipes3.jpg" alt="ヘルシー米粉パンです">
                <p>ヘルシー米粉パン</p>
            </div>
            <div class="newRecipes_form">
                <img src="newRecipes4.jpg" alt="ぷりぷり海老料理です">
                <p>ぷりぷり海老料理</p>
            </div>

            <div class="newRecipes_form">
                <img src="newRecipes5.jpg" alt="かんたんに作れる鴨南蛮です">
                <p>かんたん鴨南蛮</p>
            </div>
            </div>
        </div>



        <div class="article-box">
            <h3>今だからこそ見直したい和食</h3>
            <div class="Recipes">
                <img src="topics.jpg" alt="和食の画像">
            </div>
            <div class="sentence">
                <div class="sentence_content">
                    <p class="indent">普段、私たちが何気なく口にしている和食ですが、その基本は一汁三菜。ご飯、味噌汁、お漬物の他、主菜(肉や魚)、副菜として季節毎の野菜と豆類で構成されています。<br/></p>
                    <p><br/>昔から「旬の野菜を食べましょう」と言いますが、それは素材がじっくりと時間をかけて蓄積してきた旨味や栄養価が最高になったところでいただいて、効率よく栄養を取り風邪などを予防しましょうね、というところです。</p>
                    <p><br/>それでは各季節ごとの旬の野菜を調べてみましょう。</p>
                </div>
            <div class="tag"><a href="#"><img src="arrow.png" alt="矢印のアイコンです"><span>続きを読む<span></a></div>
            </div>
        </div>



        <div class="article-bottom-box">
            <h3>簡単おすすめレシピ</h3>
            <div class="sentence">
                <div class="Recipes">
                    <img src="pushRecipes1.jpg" alt="季節の食材を使った料理画像">
                </div>
                <div class="sentence_content">
                    <h4>季節の食材〜春〜</h4>
                    <p>&ensp;新たまねぎに春キャベツ、新じゃが、三菜などなど・・・春の野菜は風味がよくみずみずしいのが特徴です。</p>
                    <p><br/>それでは春キャベツを使ったレシピを紹介しましょう。</p>
                </div>
                <div class="tag"><a href="#"><img src="arrow.png" alt="矢印のアイコンです"><span>続きを読む</span></a></div>

                <div class="Recipes_box">
                    <div class="Recipes">
                        <img src="pushRecipes2.jpg" alt="花粉症予防になる食材を使った料理画像">
                    </div>
                    <div class="sentence_content">
                        <h4>春野菜を食べて花粉症予防？！</h4>
                        <p>&ensp;春になると花粉症に悩まされる人は多いかと思います。この花粉症、ある野菜を取ることで少し緩和されるんです！</p>
                        <p><br/>さて、その食材とは・・・？</p>
                    </div>
                    <div class="tag"><a href="#"><img src="arrow.png" alt="矢印のアイコンです"><span>続きを読む</span></a></div>
                </div>
            </div>
        </div>
    </article>
    <aside>
        <div class="aside-top">
            <a href="#" ><img src="right1.png"></a>
        </div>


        <div class="aside-bottom">
            <a href="#" ><img src="right2.png"></a>
        </div>
    </aside>
</div>
<footer>
    <div class="footer_box">
        <div class="footer_smallbox">
            <a class="footer_tag" href="#">サイトマップ</a>
            <a class="footer_tag" href="#">プライバシーポリシー</a>
            <a class="footer_tag" href="#">お問い合わせ</a>
            <a class="footer_tag" href="#">ご利用ガイド</a>
        </div>
        <p><small>Copyright &copy; CodeCamp All Rights Reserved.</small></p>
    </div>
</footer>

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-19T13:58:55+09:00

PHP 改行コード brタグ

改行コード\n

  • テキスト内で改行するときに使う
  • ダブルクォート(")内で記載し、出力する必要がある
  • 改行コードはOSによって異なる
  • 定義済み定数PHP_EOLを使うとOSを自動判定し改行文字を自動的に設定してくれる
  • HTMLでは連続する空白文字は全てスペース１つに置き換えられる

brタグ

  • HTML内で改行するときに使う
  • ソースでは改行されない。ブラウザがHTMLをレンダリングする際に改行される。

参考

https://pisuke-code.com/php-diff-of-nl-code-and-br-tag/
https://www.flatflag.nir87.com/nl2br-540#ltbrgt-2

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-19T11:40:45+09:00

SpringBootではinputタグをdisabledにするとCRUD操作中にRequired XXX parameter 'YYY' is not present

問題趣旨

  • springbootの資料を読むと、よくDBのCRUD操作はhtmlのinputタグで行われる
  • それを流用しつつ、登録前の確認画面としてhtmlのinputタグにdisabledにすると、CRUD操作のときこんな感じでエラーになる
  • Required XXX parameter 'YYY' is not present
  • image.png

解決策

  • readonlyを使いましょう
    • disabledは送信がそもそもされません。
  • より良い引用：選択はさせたくないけど値を送信したい場合、readonly属性を設定したタグをCSSでそれっぽく見せるより、disabled属性を設定したタグと同じ値をhiddenタグにもたせるのが一番スマートな解決策だと思います。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-19T05:21:07+09:00

初心者によるプログラミング学習ログ 349日目

100日チャレンジの349日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
349日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧