..Песочница..(..много песка..)..

[admin]

ссылка на страницу с черновыми наработками
learn/mappa.php
learn/action.php
learn/slayder.html
learn/akordeon-menu.html

learn/IDLEИграНаJavaScript.html

[admin]

хочу сделать мини-мапу в виде блочных элементов соединеных собой стрелочками что указывают на взаимосвязь, начиная от корневых к редактируемым

[admin]

игровая рабочая песочница https://onlinephp.io

[admin]

CodePen — это социальная среда разработки для front-end-дизайнеров и разработчиков. Создавайте и развертывайте веб-сайт, демонстрируйте свою работу, создавайте тестовые случаи для обучения и отладки, а также находите вдохновение.

[admin]

learn/action.php
1. сделать поле для ввода имени-никнейма, в данном случае используется форма с использованием тега <form> и тега <input>, но будет правильным все это записывать в элементы(теги) которые поддаются большей валидации и расширяемости

Код: Выделить всё

<div class="flex_box" id="form_input_inner_imenA" style="display:flex">
<form enctype="application/x-www-form-urlencoded" method="POST" name="authorization">
Привет, {ввод}!<input type="text" />
</form></div>

2. вводимые значения должны бить описаны в регуляром выражении за правилом - начинаться с большой буквы, не две подряд, с минимальным значением в 2-а символа и максимально 30-ть символов, дозволено иметь в своем составляющем "-"(дефис, тире) и "`"(надстрочная запятая, апостроф), " "(символьный пробел), но не более чем единицы за раз, где "-" - не может идти после заглавной, "`" или " ", где "`" - не может идти после и перед "-" или " ", цифры запрещены, после первой заглавной " " запрещен

Код: Выделить всё

<input type="text" pattern="^(?!.*\s^)(?!.*-^)(?!.*[\s]$)(?!.*-$)(?!.*-\s)(?![A-ZА-ЯЁІЇҐЄЫ]*-)(?![A-ZА-ЯЁІЇҐЄЫ]*[\s])(?!.*[\s]{2})(?!(?:.*-){2})(?!(?:.*'){2})(?!.*[A-ZА-Я]{2})[A-ZА-Я][a-zа-яA-ZА-ЯЁёІіЇїҐґЄє \- ' \s]{1,30}$" data-tooltip="Введите корректное имя" id="valid_name" placeholder="Василий-Акакий де Вилль" />

Давайте разберем, что означает каждая часть этого выражения:

• (?!.*\s^): Строка не должна начинаться с пробела

• (?!.*-^): Строка не должна начинаться с дефиса.

• (?!.*[\s]$): Не должно быть пробела в конце строки.

• (?!.*-$): Не должно быть дефиса в конце строки.

• (?!.*-\s): Не должно быть дефиса перед пробелом.

• (?!.*[A-ZА-Я]*-): Не должно быть дефиса после заглавной буквы.

• (?!.*[A-ZА-Я]*[\s]): Не должно быть пробела после заглавной буквы.

• (?!.*[\s]{2}): Не должно быть двух последовательных пробелов.

• (?!.*-){2}: Не должно быть двух дефисов подряд.

• (?!.*'){2}: Не должно быть двух апострофов подряд.

• (?!.*[A-ZА-Я]{2}): Не должно быть двух последовательных заглавных букв.

• [A-ZА-Я]: Строка должна начинаться с заглавной буквы.

• [a-zа-яA-ZА-Я \- ' \s]{1,30}: Допустимые символы в строке (буквы, пробелы, дефисы, апострофы) с минимальной длиной 1 и максимальной длиной 30.

3. поле должно отправляться и сохранятся и публиковаться
..отправляется и публикуется..

Код: Выделить всё

document.getElementById('valid_name').addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault(); // Предотвращаем стандартное поведение Enter

                var input = document.getElementById('valid_name');
                if (input.checkValidity()) {
                    var name = input.value;
                    var container = document.getElementById('form_input_inner_imenA');
                    container.innerHTML = '<p>Привет, ' + name + '!</p>';} 
				else {alert('Пожалуйста, введите корректные данные.');}}});

...остановлюсь пока здесь наверное...