Hallo in die Runde und schon mal vielen Dank im Voraus in die Runde!
Ich bin noch blutiger Anfänger und fange gerade an mich mit dem HTML zu beschäftigen. Wie schon im Fragetitel beschrieben versuche ich zwei Buttons mit Abstand nebeneinander zu bekommen, aber es gelingt mir nicht so recht. Daher setze ich mal das, was ich habe, hier rein. Ich würde mich über jeden lehrreichen Tipp sehr freuen, um meinen Horizont in diesem Bereich zu erweitern
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
form {
background-color: #fff;
width: 250px;
padding: 10px;
border-radius: 20px;
box-shadow: 0px 0px rgba(1,2,0.1);
margin
width:auto !important;
}
label {
font-weight: bold;
text-transform: uppercase;
}
input[type="text"] {
width: 250px;
padding: 20px;
margin-bottom: 9px;
border: 1px outset #FF0000;
border-radius: 10px;
box-sizing: border-box;
}
input[type="button"] {
display: block;
margin: 0 auto 12px auto;
cursor: pointer;
width: 190px;
padding: 20px 2px;
background-color: #FF0000;
color: white;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #FF0000;
border-radius: 7px;
transition: background 0.2s ease-out;
}
input[type="button1"] {
display: block;
margin: 0 auto 7px auto;
cursor: pointer;
width: 140px;
padding: 20px 2px;
background-color: #FF0000;
color: white;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 1px solid #FF0000;
border-radius: 7px;
transition: background 0.2s ease-out;
}
input[type="button1"]:hover {
background-color: #19911b;
}
input[type="button"]:hover {
background-color: #19911b;
}
</style>
</head>
<body>
<form id="itemForm">
<label for="sku">SKU:</label><br>
<input type="text" id="sku" name="sku"><br>
<label for="color">Color:</label><br>
<input type="text" id="color" name="color"><br>
<label for="size">Size:</label><br>
<input type="text" id="size" name="size"><br>
<label for="description">Description:</label><br>
<input type="text" id="description" name="description"><br><br>
<input type="button" value="Submit" onclick="submitForm()">
<input type="button1" value="Reset" onclick="form.reset()">
</form>
<script>
function submitForm() {
var form = document.getElementById('itemForm');
var formData = {
'sku': form.sku.value,
'color': form.color.value,
'size': form.size.value,
'description': form.description.value
};
google.script.run.processForm(formData);
}
</script>
</body>
</html>
