Каждый раз, когда пользователь нажимает кнопку "отправить" без ввода каких-либо данных в поля формы, в поле "имя" добавляется одно пространство. Пространство также добавляется перед текстом, если пользователь вводит что-то в этом поле и нажимает кнопку "отправить", не заполняя другие поля.
Я узнал, что если я удалю php-код для тега ввода "имя", пространство исчезнет.
Я хочу узнать, что вызвало это, а не добавлять код для пустого поля, спасибо.
Любая помощь приветствуется, чтобы избавиться от этого пространства.
контактно-form.php:
<?php if( !empty($errors)) : ?>
<div class="panel">
<ul><li><?php echo implode('</li><li>', $errors); ?></li></ul>
</div>
<script src="_scripts/scroll.js" type="text/javascript" charset="utf-8"></script>
<?php endif; ?>
<form action="testing-email.php" method="post">
<label>Name *<input type="text" placeholder="Insert your name here.." name="name" autocomplete="off"<?php echo isset($fields['name']) ? ' value= " '. e($fields['name']) . ' " ' : ''?>>
</label>
<label>Email *<input type="email" placeholder="Insert your email here.." name="email" autocomplete="off"<?php echo isset($fields['email']) ? ' value=" '. e($fields['email']) . ' " ' : ''?>>
</label>
<label>Message *<textarea placeholder="Insert your message here.." name="message" rows="8"><?php echo isset($fields['message']) ? e($fields['message']) : ''?></textarea>
</label>
<input type="submit" value="Send" class="sendEmail">
<br>
<p class="muted">* means a required field</p>
</form>
тестирование-email.php:
foreach($fields as $field => $data) {
if(empty($data)) {
$errors[] = 'The ' . ucfirst($field) . ' field is required.';
}
}
main.css:
label, input, textarea {
display: block;
}
input, textarea {
padding: 5px;
font-size: 1em;
width: 100%;
box-sizing: border-box;
}
label input, label textarea {
font-size: 1em;
}
label {
margin-bottom: 14px;
text-align: left;
}
input[type="submit"], button {
width: 20%;
height: 50px;
font-size: 1.2em;
color: black;
font-weight: bold;
outline: none;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 3px solid rgba(0,0,0,.2);
}
.sendEmail:hover {
background-color: black;
color: white;
letter-spacing: .1em;
font-weight: bold;
}
.muted {
color: rgba(0,0,0,.5);
text-align: left;
}
.panel {
color: red;
width: 50%;
text-align: left;
margin-bottom: 14px;
}
Джерейн прав. Вы добавляете пробелы в свою ценность:
value= " '. e($fields['name']) . ' " ' : ''
изменить на:
value= "'. e($fields['name']) . '"' : ''
В этой строке есть дополнительное пространство:
<label>Name *<input type="text" placeholder="Insert your name here.." name="name" autocomplete="off"<?php echo isset($fields['name']) ? ' value= " '. e($fields['name']) . ' " ' : ''?>>
Замените его для этого:
<label>Name *<input type="text" placeholder="Insert your name here.." name="name" autocomplete="off"<?php echo isset($fields['name']) ? ' value="'. e($fields['name']) . '" ' : ''?>>
... ? ' value= " '. e($fields['name']) . ' " ' : ...
и т. д. Просто проверьте исходный код сгенерированного html, чтобы понять, что я имею в виду.