我的格式如下：
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.form_wrapper {
background:#fff;
box-sizing:border-box;
padding:15px;
margin:auto 0;
position:relative;
z-index:1;
-webkit-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
-moz-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
}
.form_container {
padding:5px;
border:1px dashed #ccc;
}
.form_wrapper h2 {
font-size:1.5em;
line-height:1.5em;
margin:0;
}
.form_wrapper .title_container {
text-align:center;
margin:-15px -15px 15px;
padding:15px 0;
border-bottom:1px dashed #ccc;
}
.form_wrapper h3 {
font-size:1.1em;
font-weight:normal;
line-height:1.5em;
margin:0;
}
.form_wrapper .row {
margin:10px -15px;
margin-top: 2%;
}
.form_wrapper .row > div {
padding:0 15px;
box-sizing:border-box;
}
.form_wrapper .col_half {
width:50%;
float:left;
}
.form_wrapper .col_half1 {
width:33%;
float:left;
}
.form_wrapper .col_half2 {
width:70%;
float:left;
}
.form_wrapper .col_half9 {
width:30%;
float:left;
}
.form_wrapper .col_half3 {
width:25%;
float:left;
}
.form_wrapper .col_half10 {
width:22%;
float:left;
}
.form_wrapper .col_half6 {
width:16.5%;
float:left;
}
.form_wrapper .col_half8 {
width:17.5%;
float:left;
}
.form_wrapper .col_half7 {
width:15%;
float:left;
}
.form_wrapper .col_half4 {
width:40%;
float:left;
}
.form_wrapper .col_half5 {
width:100%;
float:left;
}
.form_wrapper .col_half11 {
width:42%;
float:left;
}
.form_wrapper label {
display:block;
margin:0 0 5px;
}
.form_wrapper .input_field, .form_wrapper .textarea_field {
position:relative;
}
.form_wrapper .input_field > span, .form_wrapper .textarea_field > span {
position:absolute;
left:0;
top:0;
color:#333;
height:100%;
border-right:1px solid #ccc;
text-align:center;
width:30px;
}
.form_wrapper .textarea_field > span {
border-bottom:1px solid #ccc;
max-height:35px;
}
.form_wrapper .input_field > span > i, .form_wrapper .textarea_field > span > i {
padding-top:12px;
}
.form_wrapper input[type="text"], .form_wrapper input[type="email"], .form_wrapper input[type="tel"], textarea {
width:100%;
padding:10px 10px 10px 35px;
border:1px solid #ccc;
box-sizing:border-box;
outline:none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
.form_wrapper input[type="text"]:focus, .form_wrapper input[type="email"]:focus, .form_wrapper input[type="tel"]:focus, textarea:focus {
-webkit-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
-moz-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
border:1px solid #f5ba1a;
}
.credit{
position:relative;
z-index:1;
text-align:center;
padding:15px;
color:#f5ba1a;
}
.credit a{
color:#daa106;
}
@media (max-width: 600px) {
.form_wrapper .col_half {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
@media (max-width: 600px) {
.form_wrapper .col_half1 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
@media (max-width: 600px) {
.form_wrapper .col_half2 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
@media (max-width: 600px) {
.form_wrapper .col_half3 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO UTENTE</h4>
</div>
<div class="form_wrapper">
<div class="form_container">
<form class="insert_form7">
<div class="row clearfix">
<div class="col_half3">
<label>Código Utente</label>
<div class="input-group-prepend"><span class="input-group-text"> <i class="fa fa-id-card-o" aria-hidden="true"></i></span>
<input type="text" id="codigoinf1" name="codigoinf" value="'.$row["CodigoUtente"].'" class="form-control" readonly="true">
</div>
</div>
<div class="col_half">
<label>Nome Utente</label>
<div class="input-group-prepend"><span class="input-group-text"><i aria-hidden="true" class="fa fa-child"></i></span>
<input type="text" name="nome" value="'.$row["nome"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Valência</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-university" aria-hidden="true"></i></span>
<input type="text" name="Destino" value="'.$row["Destino"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidade" value="'.$row["Nacionalidade"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidade" value="'.$row["Naturalidade"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distrito" value="'.$row["Distrito"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelho" value="'.$row["Concelho"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesia" value="'.$row["Freguesia"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Morada" value="'.$row["Morada"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostal" value="'.$row["CodPostal"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half">
<label>Encarregado de Educação</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user-o" aria-hidden="true"></i></span>
<input type="text" name="representante" value="'.$row["representante"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half7">
<label>Parentesco</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-anchor" aria-hidden="true"></i></span>
<input type="text" name="Parentesco" value="'.$row["Discricao"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefone" value="'.$row["telefone"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO DA MÃE</h4>
</div>
<div class="row clearfix">
<div class="col_half">
<label>Nome da Mãe</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-female" aria-hidden="true"></i></span>
<input type="text" name="nomemae" value="'.$row["nomemae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="datamae" value="'.$row["datamae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Sexo</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-venus-mars" aria-hidden="true"></i></span>
<input type="text" name="Sexomae" value="'.$row["Sexomae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Estado Civil</label>
<div class="input-group-prepend"><span class="input-group-text"><i aria-hidden="true" class="far fa-rings-wedding"></i></span>
<input type="text" name="civilmae" value="'.$row["civilmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidademae" value="'.$row["Nacionalidademae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidademae" value="'.$row["Naturalidademae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distritomae" value="'.$row["Distritomae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelhomae" value="'.$row["Concelhomae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesiamae" value="'.$row["Freguesiamae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Moradamae" value="'.$row["Moradamae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostalmae" value="'.$row["CodPostalmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefonemae" value="'.$row["telefonemae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Habilitações</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<input type="text" name="Habilitacoesmae" value="'.$row["Habilitacoesmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Profissão</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-building" aria-hidden="true"></i></span>
<input type="text" name="Profissaomae" value="'.$row["Profissaomae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Email</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="Email" name="Emailmae" value="'.$row["Emailmae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO DO PAI</h4>
</div>
<div class="row clearfix">
<div class="col_half">
<label>Nome do Pai</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-male" aria-hidden="true"></i></span>
<input type="text" name="nomepai" value="'.$row["nomepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="datapai" value="'.$row["datapai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Sexo</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-venus-mars" aria-hidden="true"></i></span>
<input type="text" name="Sexopai" value="'.$row["Sexopai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Estado Civil</label>
<div class="input_field"> <span><i aria-hidden="true" class="far fa-rings-wedding"></i></span>
<input type="text" name="civilpai" value="'.$row["civilpai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidadepai" value="'.$row["Nacionalidadepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidadepai" value="'.$row["Naturalidadepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distritopai" value="'.$row["Distritopai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelhopai" value="'.$row["Concelhopai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesiapai" value="'.$row["Freguesiapai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Moradapai" value="'.$row["Moradapai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostalpai" value="'.$row["CodPostalpai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefonepai" value="'.$row["telefonepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Habilitações</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<input type="text" name="Habilitacoespai" value="'.$row["Habilitacoespai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Profissão</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-building" aria-hidden="true"></i></span>
<input type="text" name="Profissaopai" value="'.$row["Profissaopai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Email</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="Email" name="Emailpai" value="'.$row["Emailpai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
</form>
</div>
</div>
我打算将此表格连同现有数据通过电子邮件发送给需要更新的用户。因此，该表单必须以可编辑的形式发送。 我对如何最好地做到这一点感到怀疑。 我可以导出到doc（word）文件，然后通过电子邮件发送该doc文件。 但是我想要的是完全按原样发送表单，并且用户可以根据需要进行更改，这可能吗？ 该网站没有暴露在外部，它是本地主机