<form onsubmit="process(this); return false;">
<input type="url" placeholder="введи URL" autocomplete="url" name="url" required list="urls">
<datalist id="urls">
<option>https://google.com/</option>
<option>https://stackoverflow.com/</option>
<option>https://yandex.ru/</option>
<option>https://wikipedia.org/</option>
</datalist>
<button type="submit">Запуск!</button>
<button type="reset">Сброс</button>
<textarea hidden placeholder="здесь будет ответ"></textarea>
</form>
<script>
function process(form) {
const textarea = form.querySelector("textarea");
const resetButton = form.querySelector("[type='reset']");
resetButton.onclick = () => textarea.hidden = true;
textarea.hidden = false;
textarea.value = "Загрузка...";
fetch(`https://cors-anywhere.herokuapp.com/${form.querySelector("[type='url']").value}`)
.then(response => response.text())
.then(text => {
textarea.value = text;
})
.catch(error => {
textarea.value = error.message;
})
;
}
</script>
<style>
form {
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr auto auto;
}
textarea {
grid-row-start: 2;
grid-column: span 3;
min-height: 30em;
}
</style>
попробуйте, например, этот адрес из списка или свой какой-либо
UPD Добавил CORS Proxy, теперь возможно скачивать любой сайт, удалите из кода
https://cors-anywhere.herokuapp.com/ если вам нужен чистый запрос.
UPD2 Добавил кнопку сброса
UPD3 Для немного старых браузеров...
<form onsubmit="process(this); return false;">
<input type="url" placeholder="введи URL" autocomplete="url" name="url" required list="urls">
<datalist id="urls">
<option>https://google.com/</option>
<option>https://stackoverflow.com/</option>
<option>https://yandex.ru/</option>
<option>https://wikipedia.org/</option>
</datalist>
<button type="submit">Запуск!</button>
<button type="reset">Сброс</button>
<textarea hidden placeholder="здесь будет ответ"></textarea>
</form>
<style>
form {
display: flex;
flex-wrap: wrap;
}
input:first-of-type {
flex: 1;
}
textarea {
flex: 100%;
min-height: 30em;
}
</style>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Cfetch"></script>
<script>
function process(form) {
var textarea = form.querySelector("textarea");
var resetButton = form.querySelector("[type='reset']");
resetButton.onclick = function() { textarea.hidden = true }
textarea.hidden = false;
textarea.value = "Загрузка...";
fetch("https://cors-anywhere.herokuapp.com/" + form.querySelector("[type='url']").value)
.then(function(response) { return response.text() })
.then(function(text) {
textarea.value = text;
})
.catch(function(error) {
textarea.value = error.message;
})
;
}
</script>