EN
HTML - submit input
6 points
In this article, we would like to show you how to create submit input element that appears as button in HTML.
Quick solution:
xxxxxxxxxx1
<input type="submit" text="Send" />
In this example, we create a simple submit button that sends form using POST method to the /path/to/backend. That approach redirects page to /path/to/backend.
xxxxxxxxxx1
2
<html>3
<body>4
<form action="/path/to/backend" method="post">5
<label>6
<span>Username:</span>7
<input type="text" name="username" />8
</label>9
<input type="submit" value="Send" />10
</form>11
</body>12
</html>In this example, we handle submit action in JavaScript code. return false in onsubmit prevents web page reloading. Programmer should send data in own way in handleSubmit function, e.g. AJAX / fetch() function.
xxxxxxxxxx1
2
<html>3
<body>4
<script>5
6
function handleSubmit(form) {7
if (form.username.value) {8
console.log('Username: ' + form.username.value);9
} else {10
console.warn('Username not set.');11
}12
}13
14
</script>15
<form onsubmit="handleSubmit(this); return false">16
<label>17
<span>Username:</span>18
<input type="text" name="username" />19
</label>20
<input type="submit" value="Send" />21
</form>22
</body>23
</html>In this example, we handle submit action in JavaScript code. event.preventDefault() in handleSubmit prevents web page reloading. Programmer should send data in own way in handleSubmit function, e.g. AJAX / fetch() function.
xxxxxxxxxx1
2
<html>3
<body>4
<script>5
6
function handleSubmit(event, form) {7
event.preventDefault();8
if (form.username.value) {9
console.log('Username: ' + form.username.value);10
} else {11
console.warn('Username not set.');12
}13
}14
15
</script>16
<form onsubmit="handleSubmit(event, this)">17
<label>18
<span>Username:</span>19
<input type="text" name="username" />20
</label>21
<input type="submit" value="Send" />22
</form>23
</body>24
</html>