Переменная в html-коде

Question

Я супер новичок в html Все, что мне нужно, это код для поля, в котором пользователь может ввести свой номер своего персонала, а затем кнопку, которая приведет его к URL-адресу, составленному из его номера персонала где-то на пути.

Например: Пользователь вводит «123» в текстовом поле и при нажатии на кнопку «Отправить» кнопка должна быть приняты к этому документу: www.mysite.com/Staff123.pdf

Не уверен, что о синтаксис, но с примером, который я смог бы отредактировать в соответствии с тем, что мне нужно, чтобы получить код для создания как текстового поля, так и кнопки.

Большое спасибо

Answer 1

Вам необходимо создать форму в html. В принципе, форма представляет собой блок, который позволяет пользователю вводить некоторые значения (текст, пароль, адрес электронной почты, дату, целое число, файл и т. Д.) И отправлять эти значения после отправки через кнопку отправки определенному файлу, который будет обрабатывать эти данные.

Классический пример - форма входа, которую вы можете видеть практически на каждом сайте. Это может быть так:

<form action="processing_script.php" method="post"> 
    <input type="email" name="user_mail" placeholder="Please enter your mail here"> 
    <input type="password" name="user_password" placeholder="Please enter your password here"> 
    <input type="submit" value="Click here to send the form"> 
</form> 

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

• действие для тега формы: это скрипт, который будет получать и обрабатывать значения из этой формы.
• атрибут метода для тега формы: это способ, по которому значения будут отнесены к сценарию назначения. Это может быть «post» или «get». Метод post отправляет значения через HTTP-заголовки, поэтому он скрыт для пользователей (но его можно увидеть с помощью таких инструментов, как Wireshark). Метод get будет отправлять значения через адресную строку, как это (это URL-адрес, который вы видите после отправки формы): http://yourWebsite.com/processing_script.php?user_mail=johndoe@liamg.com&user_password=mYp@ $$ W0rD
• Тип атрибута для тега формы: это зависит от типа данных, которые вы хотите использовать чтобы узнать. Ваш веб-браузер будет использовать этот атрибут, чтобы определить, каким образом он будет показывать вход для пользователя. Например, пользователь увидит небольшой виджет календаря, если вы написали тип = «дата». Браузер также выполнит некоторую базовую проверку по типу данных, когда пользователь нажмет кнопку отправки (на самом деле браузер не позволит кому-то проверить форму, если, например, тип ввода - «электронная почта» и значение, введенное пользователем это «zertredfgt @» или «erfthrefbgthre», но он пройдет, если почта «johndoe@liamg.com»). Тип может быть электронной почтой, текстом, датой, паролем, файлом, отправкой и некоторыми другими.
• атрибут имени для тега ввода: это имя переменной, которое будет использоваться в сценарии назначения для доступа к значению, введенному пользователем в поле формы.
• атрибут placeholder для тега ввода: это текст, отображаемый в полях, когда они все еще пусты. Текст не в черном, это какой-то серый цвет.

Последнее, что нужно объяснить: оно отображается как кнопка, а текст на нем исходит из атрибута value.

В вашем случае, я думаю, вам нужно использовать только JavaScript: Создайте JavaScript-метод, который перенаправит вас вправо pdf-url на основе того, что вводится в текстовый ввод. Создайте небольшую форму без полей действия или метода. Создайте текст типа ввода (для номера персонала) с хорошим именем атрибута, подобным этому: name = "staffNumber". Создать кнопку (не кнопку отправки), как это:

Чтобы переадресовать к определенному URL в JavaScript, вы хотите прочитать: How to redirect to another webpage in JavaScript/jQuery?

Чтобы прочитать значение от входа в JavaScript, вы можете продолжить так:

... 

var staff_number = getElementsByName("staffNumber")[0].value; 
... 

Чтобы создать полный адрес правой PDF, просто использовать оператор конкатенации (это + в JavaScript), так что-то подобное должно работать:

... 
var base_url = "http://youWebsite.com/Staff"; 
var file_extension = ".pdf"; 
var full_url = base_url + staff_number.toString() + file_extension; 
... 

(.ToString() представляет собой метод, убедитесь, что он обрабатывается в виде строки, чтобы сцепить и избежать некоторых странное дополнение, которое могло произойти, я предполагаю)

Я думаю, у вас есть все, что нужно создать именно что вам нужно. Пожалуйста, держите нас в курсе, когда вы пробовали!

-> Надеюсь, что мои английские средние навыки позволили вам понять меня правильно;)