所以我创建了一个表单，我试图进行验证（一旦有人填写并按下发送的按钮，它的内容应该是参加公司的电子邮件），但实际上我不知道该怎么做。
我已经搜索过并且我尝试了一些代码，但实际上没有任何实际操作。
我已经尝试了<form action="mailto:companysemail" method="post" enctype="text/plain">，但它所做的就是用新的空白电子邮件打开电子邮件应用。
我该怎么做？还有其他办法吗？
另外，附加简历（在我的情况下）会起作用吗？ （这是我第一次加入）
这是我的代码：
body {
height: 100%;
padding-top: 50px;
}
section {
height: calc(90% - 50px);
}
.navbar-inverse .navbar-nav li.active a {
background-color: #6dafad;
/* cor de fundo do que está seleccionado */
color: #fff;
/* cor do texto do que está seleccionado */
border-radius: 2rem;
/* adiciona as arestas redondas */
margin: 0 0.25em;
}
.navbar-inverse .navbar-nav>li>a {
/* altera a cor de texto do cabeçalho */
color: #ffffff;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
color: #d4e1e3;
/* altera a cor de texto do cabeçalho quando se passa com o rato por cima */
}
.navbar-inverse .navbar-nav>.active>a,
/* altera a cor de fundo do elemento activo quando se passa por cima */
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
color: #d4e1e3;
background-color: #6dafad;
}
.navbar-inverse .navbar-nav>.open>a,
/* altera a cor de fundo do elemento activo quando se abre o dropdown */
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
color: #d4e1e3;
background-color: #6dafad;
border-radius: 2rem;
/* adiciona as arestas redondas */
margin: 0 0.25em;
}
.affix {
padding: 0px;
-webkit-transition: padding 0.2s linear;
-moz-transition: padding 0.2s linear;
-o-transition: padding 0.2s linear;
transition: padding 0.2s linear;
}
.affix-top {
padding-top: 15px;
/* altura entre texto e topo cabeçalho */
padding-bottom: 15px;
/* altura entre texto e base cabeçalho */
-webkit-transition: padding 0.5s linear;
-moz-transition: padding 0.5s linear;
-o-transition: padding 0.5s linear;
transition: padding 0.5s linear;
}
.navbar-brand {
padding: 0px;
margin: 0px;
padding-left: 5px;
/* se não estiver, parte do logo - zona branca - fica comida -> esquerda */
max-height: 50px;
/* altura maxima do logotipo */
}
/* fim cabeçalho */
/* inicio corpo */
body {
color: #666;
font: 300 15px/15px Roboto, Arial, Helvetica;
background-color: #f5f7f7;
-webkit-font-smoothing: antialiased;
}
.spacer {
padding: 5em;
padding-bottom: 0;
}
h1,
h2,
h3,
h4 {
margin: 0;
line-height: 1em;
}
h1 {
font: 700 3em Raleway, Arial, Helvetica;
padding: 5em 0;
text-transform: uppercase;
color: #fff;
}
h2 {
font: 700 1.5em Raleway, Arial, Helvetica;
margin-bottom: 1em;
color: #97CACA;
}
h3 {
font: 700 1.25em Raleway, Arial, Helvetica;
margin: 0.5em 0;
}
legend {
font-size: 1em;
line-height: 1.7em;
margin-bottom: 1.7em;
}
p {
font-size: 1em;
line-height: 1.7em;
margin-bottom: 1.7em;
}
.service {
padding: 0 10em 2em 10em;
color: #fff;
}
.service p {
color: #EFACC2;
font-size: 0.90em;
margin: 0;
}
.social a {
margin-right: 1em;
}
/* Formulario*/
input[type="text"]:focus,
textarea:focus,
textarea.form-control:focus {
outline: 0;
background: #fff;
/* fundo da area de escrita - seleccionado */
border: 3px solid #d1e6c5;
/* borda da area de escrita - seleccionado */
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
input[type="text"]:-moz-placeholder,
textarea:-moz-placeholder,
textarea.form-control:-moz-placeholder {
color: #9d9892;
}
input[type="text"]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder {
color: #9d9892;
}
input[type="text"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
color: #9d9892;
}
label {
font-weight: 400;
}
strong {
font-weight: 600;
}
a,
a:hover,
a:focus {
color: #6dafad;
text-decoration: none;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}
h1,
h2 {
margin-top: 10px;
font-size: 30px;
font-weight: 600;
color: #fff;
line-height: 42px;
}
h3 {
font-size: 22px;
font-weight: 300;
color: #615c58;
line-height: 30px;
}
img {
max-width: 100%;
}
::-moz-selection {
background: #d1e6c5;
color: #fff;
text-shadow: none;
}
::selection {
background: #6dafad;
color: #fff;
text-shadow: none;
}
/* fundo do texto seleccionado */
/***** Top content *****/
.top-content h1 {
color: #fff;
}
.top-content .description {
margin: 20px 0 10px 0;
color: #fff;
}
.top-content .description a {
color: #fff;
border-bottom: 2px dotted #fff;
}
.top-content .description a:hover,
.top-content .description a:focus {
border: 0;
}
.top-content .top-big-link {
margin-top: 35px;
}
.form-box {
padding-top: 40px;
}
.form-top {
padding: 25px 25px 15px 25px;
background: #d1e6c5;
text-align: left;
border-radius: 5px 5px 0 0;
/* cantos redondos, area do formulario - texto */
}
.form-top h3 {
margin-top: 0;
}
.form-bottom {
padding: 25px 25px 30px 25px;
background: #fff;
border: 3px solid #d1e6c5;
/* espessura do formulario */
border-radius: 0 0 5px 5px;
/* cantos redondos, area do formulario */
}
.form-bottom form textarea {
height: 100px;
}
.form-bottom form .input-error {
border-color: #d05a4e;
}
/***** Media queries *****/
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (max-width: 767px) {
.inner-bg {
padding: 40px 0 110px 0;
}
}<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<!--/ INICIO cabeçalho <-->
<div id="wrap">
<div class="navbar navbar-inverse navbar-light navbar-fixed-top" style="background-color: #97CACA; color: #fff; border-color: transparent;" data-spy="affix" data-offset-top="100">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-fixed-top" href="#"><img class="img-responsive logo" width="300" height="300" src="https://preview.ibb.co/gAXWf7/logo.png" alt=""></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="sobre-nos.html">Sobre Nós</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Serviços <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="criancas.html">Bebés e Crianças</a></li>
<li><a href="adultos.html">Adultos e Séniores</a></li>
<li><a href="empresas.html">Empresas</a></li>
<li role="separator" class="divider"></li>
<li class="active"><a href="jobs.html">Venha trabalhar conosco!</a></li>
</ul>
</li>
<li><a href="#">Contactos</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--/ FIM cabeçalho <-->
<!--/ INICIO corpo <-->
<div class="top-content">
<div class="inner-bg">
<div class="contentor">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<h2>Venha trabalhar conosco!</h2>
<p>A Algarve's Sitters é uma empresa portuguesa, sediada na região do Algarve, que atua com bebés, crianças, adultos e séniores. Distingue-se pela elevada qualidade dos serviços que presta e por contar com colaboradores qualificados e especializados,
cuidadosamente selecionados em função da sua educação, valores e experiência.</p>
<p>Se quiser integrar esta equipa, preencha por favor o formulário abaixo apresentado. Se tiver as qualificações e o perfil adequado, entraremos em contacto consigo.</p>
</div>
<div class="form-bottom">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name">Nome</label>
<input type="text" class="form-control" id="firstname" name="firstname" maxlength="50">
</div>
<div class="col-sm-6 form-group">
<label for="name">Sobrenome</label>
<input type="text" class="form-control" id="lastname" name="lastname" maxlength="50">
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" maxlength="50">
</div>
<div class="col-sm-6 form-group">
<label for="phone">Contacto</label>
<input type="text" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="residencia">Área de residência/ Concelho</label>
<input type="text" class="form-control" id="residencia" name="residencia" maxlength="100">
</div>
<div class="col-sm-6 form-group">
<label for="experiencia">Experiência profissional</label>
<input type="text" class="form-control" id="experiencia" name="experiencia" required maxlength="100">
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="conhecimento">Como tomou conhecimento da Algarve's Sitters?</label>
<input type="text" class="form-control" id="conhecimento" name="conhecimento" required maxlength="300">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<label class="col-sm-12">Áreas de trabalho a que se candidata</label>
<div class="col-sm-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="bebes" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Bebés e Crianças</label>
<br>
<input class="form-check-input" type="checkbox" id="adultos" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Adultos e Séniores</label>
<br>
<input class="form-check-input" type="checkbox" id="empresas" value="option3">
<label class="form-check-label" for="inlineCheckbox3">Empresas</label>
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-12 form-group">
<label for="exampleFormControlFile1">Curriculum Vitæ</label>
<input type="file" class="form-control-file" id="cv" name="cv" required maxlength="100">
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="name">Comentário adicional</label>
<textarea class="form-control" type="textarea" id="comentario" name="comentario" placeholder="A sua mensagem aqui..." maxlength="6000" rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" class="btn btn-lg btn-block" style="background-color: #d1e6c5;" id="btnContactUs">Post It! </button>
</div>
</div>
<label class="checkbox-inline" for="checkboxes-1">
<input type="checkbox" name="checkboxes" id="termos" value="1" required="required">Li e aceito os <a href="#" target="blank">Termos e Condições</a>
</label>
</form>
</div>
</div>
</div>
</div>
</div>
</body>