| источник - пример 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> |
используется 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> |
файл 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> |
а теперь вод футером добавим скрипты
<script src="js/jquery-3.7.1.min.js"></script> <script src="js/html.js?<?=time()?>"></script> |
//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!');
}
});
}); |
| 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);
});
}
});
}); |
<?if(empty($_GET['val'])){
$result = "Ничего не ввели";
}
else{
$result = "Введено: ".$_GET['val'];
}
echo json_encode($result);die(); |