59 lines
1.6 KiB
PHP
59 lines
1.6 KiB
PHP
<style>
|
|
#comment {
|
|
resize: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#comment-count {
|
|
right: 3px;
|
|
bottom: 0;
|
|
}
|
|
|
|
@supports selector(:has(html)) {
|
|
.was-validated .position-relative:has(:invalid)~.invalid-feedback {
|
|
display: block;
|
|
}
|
|
|
|
.was-validated :invalid~.invalid-feedback {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@supports not selector(:has(html)) {
|
|
.was-validated :invalid~#comment-count {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<form action="comment.php" method="post" class="needs-validation row m-0" novalidate>
|
|
<div class="col">
|
|
<h4 class="mb-3">Leave a Comment!</h4>
|
|
<div class="mb-3">
|
|
<input class="form-control" type="text" name="title" required placeholder="A catching title" />
|
|
<div class="invalid-feedback">
|
|
Please enter a title.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input class="form-control" type="text" name="name" required placeholder="Your name" />
|
|
<div class="invalid-feedback">
|
|
Please enter a name.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="position-relative">
|
|
<textarea class="form-control" id="comment" name="comment" maxlength="250" required placeholder="Comment here"></textarea>
|
|
<div class="invalid-feedback">
|
|
Please enter text.
|
|
</div>
|
|
<small class="text-muted position-absolute" id="comment-count">
|
|
0/250
|
|
</small>
|
|
</div>
|
|
<div class="invalid-feedback">
|
|
Please enter text.
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary mb-3">Comment</button>
|
|
</div>
|
|
</form> |