Удобный онлайн генератор паролей

html + php + js



источник - пример html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="styles/style.css">

    <meta property="og:title" content="Заголовок страницы в OG">
    <meta property="og:description" content="Описание страницы в OG">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/">
  </head>
  <body>
    <header>
      <h1>Личный сайт</h1>
      <p>Который сделан на основе готового шаблона</p>      
      <nav>
        <ul>          
          <li><a href="index.html">Эта страница</a></li>
          <li><a href="catalog.html">Другая страница</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <section>
          <h2>Первая секция</h2>
          <p>Она обо мне</p>
          <img src="images/image.png" alt="Человек и пароход">
          <p>Но может быть и о семантике, я пока не решил.</p>
        </section>
        <section>
          <h2>Вторая секция</h2>
          <p>Она тоже обо мне</p>
        </section>
        <section>
          <h2>И третья</h2>
          <p>Вы уже должны были начать догадываться.</p>
        </section>
      </article>
    </main>
    <footer>
      <p>Сюда бы я вписал информацию об авторе и ссылки на другие сайты</p>
    </footer>
    <!-- сюда можно подключить скрипты  -->
  </body>
</html>
переработанный header
используется php
<header>
      <h1>Личный сайт</h1>
      <p>Который сделан на основе готового шаблона</p>  
      <? 
      $arMenu = [
        [
          "URL" => "index.html",
          "NAME" => "Эта страница",
        ],
         [
          "URL" => "catalog.html",
          "NAME" => "Другая страница",
        ]
      ];
      if(!empty($arMenu)):?>    
        <nav>
          <ul>
            <?foreach($arMenu as $arLink):?>          
              <li><a href="<?=$arLink["URL"]?>"><?=$arLink["NAME"]?></a></li>
            <?endforeach;?>
          </ul>
        </nav>
      <?endif;?>
    </header>
Формы и инпуты
https://www.w3schools.com/html/html_form_input_types.asp - список типов инпутов с примерами
добавим раздел с формой
<section>
          <h2>А теперь червертая секция с формой</h2>
          <form action="form.php" method="get">
            <input type="text" name="textInput" placeholder="Введите текст">
            <input type="submit" value="Submit">            
          </form>
          <button id="formBtn">Кнопка</button>
</section>
по клику на submit будет открываться form.php
файл form.php
<?if(!empty($_GET["textInput"]) && ($_GET["textInput"]=="hello")):?>
   <h1>И Вам hello!</h1>   
<?else:?>
   <h1><?=__FILE__?></h1>   
<?endif;?>


<h2>$_REQUEST</h2>
<pre>
<?print_r($_REQUEST);?>
</pre>
<h2>$_GET</h2>
<pre>
<?print_r($_GET);?>
</pre>
<h2>$_POST</h2>
<pre>
<?print_r($_POST);?>
</pre>

а теперь вод футером добавим скрипты
jquery cdn
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/html.js?<?=time()?>"></script>
файл html.js
//native js
document.addEventListener("DOMContentLoaded", function(event) { 
     console.log('js native document ready',event);
     
     var element = document.getElementById('formBtn');
   element.addEventListener("click", function(event) {
      console.log('jquery click',event); 
      let textInput = document.querySelector("input[name='textInput']");
      if(textInput.value == 'hello1'){
         alert('И Вам hello1!');
      }
   }, false);
});

//jquery
$(document).ready(function(event){
   console.log('jquery document ready',event);
   
   $('#formBtn').on('click',function(event){
      console.log('jquery click',event);      
      if($('input[name="textInput"]').val()=='hello'){
         alert('И Вам hello!');
      }
   });

});
AJAX
https://stackoverflow.com/questions/8567114/how-can-i-make-an-ajax-call-without-jquery - ajax на native js
document.addEventListener("DOMContentLoaded", function(event) { 
     console.log('js native document ready',event);
     
     var element = document.getElementById('formBtn');
   element.addEventListener("click", function(event) {
      console.log('jquery click',event); 
      let textInput = document.querySelector("input[name='textInput']");
      if(textInput.value == 'hello1'){
         alert('И Вам hello1!');
      }
      else{
         //
         let dataRequest = new URLSearchParams({
            val : textInput.value,
         });
         const strRequest = dataRequest.toString();
         console.log(strRequest);
         
          var xmlhttp = new XMLHttpRequest();
          //не видит он val
          xmlhttp.onreadystatechange = function() {
              if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
                 if (xmlhttp.status == 200) {
                     console.log(JSON.parse(xmlhttp.responseText));
                 }
                 else if (xmlhttp.status == 400) {
                    alert('There was an error 400');
                 }
                 else {
                     alert('something else other than 200 was returned');
                 }
              }
          };

          xmlhttp.open("GET", "ajax.php", true);
          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
          xmlhttp.send(strRequest);
         
      }
   }, false);

});


$(document).ready(function(event){
   console.log('jquery document ready',event);
   
   $('#formBtn').on('click',function(event){
      console.log('jquery click',event);      
      if($('input[name="textInput"]').val()=='hello'){
         alert('И Вам hello!');
      }
      else{
         let dataRequest = {
            val : $('input[name="textInput"]').val(),
            
         }            
         $.ajax({
              url: "ajax.php",
              data: dataRequest,
              type: "GET",
              dataType: "json"

         }).done(function(data) {            
            console.log('jquery ajax done',data);   
              
         }).fail(function(data){
            console.log('jquery ajax fail',data);
         });
      }
   });

});
ajax.php
<?if(empty($_GET['val'])){
   $result = "Ничего не ввели";
}
else{
   $result = "Введено: ".$_GET['val'];
}
echo json_encode($result);die();
Если блог был полезным, можете угостить меня "чашечкой кофе" :)

Сбер по номеру телефона +7 (953) 585-13-09 Вероника.
Спасибо!