Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosQuebra de linha no formulário
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Quebra de linha no formulário
por Thiag4530 11.01.20 3:43
Detalhes da questão
Endereço do fórum: http://policiacpe.forumeiros.com/
Versão do fórum: phpBB3
Descrição
Bom, eu estou tendo um problema em um formulário ele fica aparecendo assim no tópico:
Quero que apareça assim:Data: 11 Jan 2020nResponsável: Sargento ThiagonAluno: SoldadoTestenSituação: AprovadonObservações: Testando.nCódigo de Atualização: SoldadoTeste - 11 Jan 2020 [[X]]n(X) Concordo em casos de erros eu seja punido!
Data: 11 Jan 2020
Responsável: Sargento Thiago
Aluno: SoldadoTeste
Situação: Aprovado
Observações: Testando.
Código de Atualização: SoldadoTeste - 11 Jan 2020 [[X]]
(X) Concordo em casos de erros eu seja punido!
Código:
- Código:
message: [
'[b]Data:[/b] ' + data.datains,
'[b]Responsável:[/b] ' + data.cins + ' ' + data.nins,
'[b]Aluno:[/b] ' + data.nsol,
'[b]Situação:[/b] ' + data.aprep,
'[b]Observações:[/b] ' + data.observ,
'[b]Código de Atualização:[/b] ' + data.codact,
'(' + data.termos + ') Concordo em casos de erros eu seja punido!',
].join('\n')
Sim, eu já tentei alterar o "join('\n')" para "join("\n")", porém não funciona também.
O fórum é modern, esqueci de alterar no tópico aqui.
Última edição por Pedxz em 11.01.20 8:41, editado 2 vez(es) (Motivo da edição : O fórum é modern, esqueci de alterar)
Thiag4530- Novo Membro
- Membro desde : 08/01/2020
Mensagens : 6
Pontos : 12 -
Re: Quebra de linha no formulário
por tikky 11.01.20 7:35
Olá @Thiag4530,
Tente alterar o seu código para o seguinte:
Aguardo uma resposta sua,
pedxz.
Tente alterar o seu código para o seguinte:
- Código:
message = [
'[b]Data:[/b] ' + data.datains,
'[b]Responsável:[/b] ' + data.cins + ' ' + data.nins,
'[b]Aluno:[/b] ' + data.nsol,
'[b]Situação:[/b] ' + data.aprep,
'[b]Observações:[/b] ' + data.observ,
'[b]Código de Atualização:[/b] ' + data.codact,
'(' + data.termos + ') Concordo em casos de erros eu seja punido!'
].join('\n');
Aguardo uma resposta sua,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Quebra de linha no formulário
por Thiag4530 11.01.20 8:11
Alterei e o resultado foi: O formulário não posta a resposta no fórum, apenas redireciona para a página inicial.Pedxz escreveu:Olá @Thiag4530,
Tente alterar o seu código para o seguinte:
- Código:
message = [
'[b]Data:[/b] ' + data.datains,
'[b]Responsável:[/b] ' + data.cins + ' ' + data.nins,
'[b]Aluno:[/b] ' + data.nsol,
'[b]Situação:[/b] ' + data.aprep,
'[b]Observações:[/b] ' + data.observ,
'[b]Código de Atualização:[/b] ' + data.codact,
'(' + data.termos + ') Concordo em casos de erros eu seja punido!'
].join('\n');
Aguardo uma resposta sua,
pedxz.
Vou mostrar o formulário completo:
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="https://i.imgur.com/QKXVhYz.png">
<title>Polícia CPE - Relatório de Curso Primário</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #2688dc;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #375e7f;
font-size: 14px;
transition: linear all 125ms;
margin-top: 45%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control, .select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
height: auto;
}
.select2-container--default .select2-selection--single { padding: 2px 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 20%; }
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-46 {
width: 46%;
}
.col-30 {
width: 30%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body class="bg-dark" style="
background: url('https://i.imgur.com/0cTgZqY.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
<main class="wrapper">
<form id="form-content">
<a href="" title="Voltar ao tópico" class="goBack"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h2><b>Relatório: Curso Primário
</b></h2>
<center><img src="https://2img.net/i.imgur.com/eMpeuFT.png" alt="some text">
<h4>Preencha os dados abaixo corretamente, caso contrário a Administração irá punir conforme diz as regras do fórum.</h4>
</div>
<h3>Dados do Instrutor</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="cins">Cargo do Instrutor:</label>
<select type="text" name="cins" id="cins" class="form-control js-example-basic-single" required>
<option value="Soldado">Soldado</option>
<option value="Cabo">Cabo</option>
<option value="Sargento">Sargento</option>
<option value="SubTenente">SubTenente</option>
<option value="Major">Major</option>
<option value="Tenente">Tenente</option>
<option value="General">General</option>
<option value="Comandante">Comandante</option>
<option value="Inspetor">Inspetor</option>
<option value="Inspetor Chefe">Inspetor Chefe</option>
<option value="Embaixador">Embaixador</option>
<option value="Coordenador">Coordenador</option>
<option value="Diretor">Diretor</option>
<option value="Diretor Geral">Diretor Geral</option>
<option value="Supremo">Supremo</option>
<option value="Vice Presidente">Vice Presidente</option>
<option value="Presidente">Presidente</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="nins">Nome do Instrutor:</label>
<input type="text" id="nins" class="form-control" placeholder="Nome do Instrutor" required/>
</div>
<div class="form-group-col col-30">
<label for="tag">TAG do Instrutor:</label>
<input type="text" id="tag" class="form-control" placeholder="TAG sem [ ]" maxlength="3" required/>
</div>
</div>
<h3>Dados do Curso Inicial</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="datains">Data da Instrução:</label>
<input type="text" id="datains" class="form-control" disabled/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nsol">Nickname do Aluno:</label>
<input type="text" id="nsol" class="form-control" placeholder="Nome do Recruta" required/>
</div>
<div class="form-group-col col-30">
<label for="aprep">Situação:</label>
<select type="text" name="aprep" id="aprep" class="form-control js-example-basic-single" required>
<option value="Aprovado">Aprovado</option>
<option value="Reprovado">Reprovado</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="resp">Respostas certas:</label>
<input type="number" name="resp" id="resp" class="form-control" max="6" placeholder="Número de respostas certas" required/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<span class="card">OPCIONAL</span>
<label for="observ">Observações:</label>
<textarea data-type="textarea" id="observ" class="form-control" placeholder="Explique todo o rendimento do aluno na aula, incluindo a quantidade de respostas certas, desempenho nos comandos e afins." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<input type="checkbox" name="termos" value="X" required> Concordo em casos de erros eu seja punido.
</div>
</div>
<br/>
<button class="btn btn-primary" type="submit" >Enviar Resposta!</button>
<br>
<form>
<footer>
<div><i class="fas fa-code"></i> Polícia CPE
2018 - 2020 <b>by</b> Thiag4530 <i class="fas fa-code"></i> </div>
</footer>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var month = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
function formatDate(instance) {
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
return date;
};
var curDate = new Date();
$('#datains').val(formatDate(curDate));
</script>
<script type="text/javascript">
(function ($) {
'use strict';
var topic = '1';
$(function () {
$('.js-example-basic-single').select2();
$('.goBack').attr('href','/t' + topic + '-?view=newest');
$('#form-content').on('submit', function (event) {
var data = {
nins: $('#nins').val(),
cins: $('#cins').val(),
tag: $('#tag').val(),
nsol: $('#nsol').val(),
aprep: $('#aprep').val(),
datains: $('#datains').val(),
observ: $('#observ').val(),
termos: 'X',
codact: ''
};
if(data.aprep == "Aprovado") {
data.codact = data.nsol + ' - ' + data.datains + ' [' + data.tag + ']';
} else {
data.codact = '[color=#ff0000]REPROVADO[/color] - ' + data.datains;
}
if ($('#observaçao').val() === '') {
data.observaçao = 'Observação desnecessária.';
} else {
data.observaçao = $('#observaçao').val();
}
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: topic,
message = [
'[b]Data:[/b] ' + data.datains,
'[b]Responsável:[/b] ' + data.cins + ' ' + data.nins,
'[b]Aluno:[/b] ' + data.nsol,
'[b]Situação:[/b] ' + data.aprep,
'[b]Observações:[/b] ' + data.observ,
'[b]Código de Atualização:[/b] ' + data.codact,
'(' + data.termos + ') Concordo em casos de erros eu seja punido!'
].join('\n'),
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = 'http://' + location.host + '/t' + topic +'-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Thiag4530- Novo Membro
- Membro desde : 08/01/2020
Mensagens : 6
Pontos : 12 -
Re: Quebra de linha no formulário
por tikky 11.01.20 8:22
Altere a página para a seguinte:
Atenciosamente,
pedxz.
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="https://i.imgur.com/QKXVhYz.png">
<title>Polícia CPE - Relatório de Curso Primário</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #2688dc;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #375e7f;
font-size: 14px;
transition: linear all 125ms;
margin-top: 45%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control, .select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
height: auto;
}
.select2-container--default .select2-selection--single { padding: 2px 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 20%; }
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-46 {
width: 46%;
}
.col-30 {
width: 30%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body class="bg-dark" style="
background: url('https://i.imgur.com/0cTgZqY.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
<main class="wrapper">
<form id="form-content">
<a href="" title="Voltar ao tópico" class="goBack"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h2><b>Relatório: Curso Primário <img class="emojione" alt=":registered:️" title=":registered:" title=":registered:" src="https://cdn.jsdelivr.net/emojione/assets/png/00ae.png?v=2.2.7"/></b></h2>
<center>
<img src="https://2img.net/i.imgur.com/eMpeuFT.png" alt="some text">
<h4>Preencha os dados abaixo corretamente, caso contrário a Administração irá punir conforme diz as regras do fórum.</h4>
</div>
<h3>Dados do Instrutor</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="cins">Cargo do Instrutor:</label>
<select type="text" name="cins" id="cins" class="form-control js-example-basic-single" required>
<option value="Soldado">Soldado</option>
<option value="Cabo">Cabo</option>
<option value="Sargento">Sargento</option>
<option value="SubTenente">SubTenente</option>
<option value="Major">Major</option>
<option value="Tenente">Tenente</option>
<option value="General">General</option>
<option value="Comandante">Comandante</option>
<option value="Inspetor">Inspetor</option>
<option value="Inspetor Chefe">Inspetor Chefe</option>
<option value="Embaixador">Embaixador</option>
<option value="Coordenador">Coordenador</option>
<option value="Diretor">Diretor</option>
<option value="Diretor Geral">Diretor Geral</option>
<option value="Supremo">Supremo</option>
<option value="Vice Presidente">Vice Presidente</option>
<option value="Presidente">Presidente</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="nins">Nome do Instrutor:</label>
<input type="text" id="nins" class="form-control" placeholder="Nome do Instrutor" required/>
</div>
<div class="form-group-col col-30">
<label for="tag">TAG do Instrutor:</label>
<input type="text" id="tag" class="form-control" placeholder="TAG sem [ ]" maxlength="3" required/>
</div>
</div>
<h3>Dados do Curso Inicial</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="datains">Data da Instrução:</label>
<input type="text" id="datains" class="form-control" disabled/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nsol">Nickname do Aluno:</label>
<input type="text" id="nsol" class="form-control" placeholder="Nome do Recruta" required/>
</div>
<div class="form-group-col col-30">
<label for="aprep">Situação:</label>
<select type="text" name="aprep" id="aprep" class="form-control js-example-basic-single" required>
<option value="Aprovado">Aprovado</option>
<option value="Reprovado">Reprovado</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="resp">Respostas certas:</label>
<input type="number" name="resp" id="resp" class="form-control" max="6" placeholder="Número de respostas certas" required/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<span class="card">OPCIONAL</span>
<label for="observ">Observações:</label>
<textarea data-type="textarea" id="observ" class="form-control" placeholder="Explique todo o rendimento do aluno na aula, incluindo a quantidade de respostas certas, desempenho nos comandos e afins." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<input type="checkbox" name="termos" value="X" required> Concordo em casos de erros eu seja punido.
</div>
</div>
<br/>
<button class="btn btn-primary" type="submit" >Enviar Resposta!</button>
<br>
<form>
<footer>
<div><i class="fas fa-code"></i> Polícia CPE <img class="emojione" alt=":copyright:️" title=":copyright:" title=":copyright:" src="https://cdn.jsdelivr.net/emojione/assets/png/00a9.png?v=2.2.7"/> 2018 - 2020 <b>by</b> Thiag4530 <i class="fas fa-code"></i> </div>
</footer>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var month = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
function formatDate(instance) {
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
return date;
};
var curDate = new Date();
$('#datains').val(formatDate(curDate));
</script>
<script type="text/javascript">
(function ($) {
'use strict';
var topic = '1',
content;
$(function () {
$('.js-example-basic-single').select2();
$('.goBack').attr('href','/t' + topic + '-?view=newest');
$('#form-content').on('submit', function (event) {
var data = {
nins: $('#nins').val(),
cins: $('#cins').val(),
tag: $('#tag').val(),
nsol: $('#nsol').val(),
aprep: $('#aprep').val(),
datains: $('#datains').val(),
observ: $('#observ').val(),
termos: 'X',
codact: ''
};
if(data.aprep == "Aprovado") {
data.codact = data.nsol + ' - ' + data.datains + ' [' + data.tag + ']';
} else {
data.codact = '[color=#ff0000]REPROVADO[/color] - ' + data.datains;
}
if ($('#observaçao').val() === '') {
data.observaçao = 'Observação desnecessária.';
} else {
data.observaçao = $('#observaçao').val();
}
content = [
'[b]Data:[/b] ' + data.datains,
'[b]Responsável:[/b] ' + data.cins + ' ' + data.nins,
'[b]Aluno:[/b] ' + data.nsol,
'[b]Situação:[/b] ' + data.aprep,
'[b]Observações:[/b] ' + data.observ,
'[b]Código de Atualização:[/b] ' + data.codact,
'(' + data.termos + ') Concordo em casos de erros eu seja punido!'
].join('\n');
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: topic,
message: content,
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = 'http://' + location.host + '/t' + topic +'-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Atenciosamente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Quebra de linha no formulário
por Thiag4530 11.01.20 9:01
Voltou o erro http://prntscr.com/qm679iPedxz escreveu:Altere a página para a seguinte:Caso continue a não postar, verifique se a seguinte opção está marcada como Não, vá ao Painel de controle > Geral > Fórum > Segurança, e localize a opção "Desautorizar formulários não oficiais de postarem no fórum e enviar mensagens privadas"
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="https://i.imgur.com/QKXVhYz.png">
<title>Polícia CPE - Relatório de Curso Primário</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #2688dc;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #375e7f;
font-size: 14px;
transition: linear all 125ms;
margin-top: 45%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control, .select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
height: auto;
}
.select2-container--default .select2-selection--single { padding: 2px 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 20%; }
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-46 {
width: 46%;
}
.col-30 {
width: 30%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body class="bg-dark" style="
background: url('https://i.imgur.com/0cTgZqY.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
<main class="wrapper">
<form id="form-content">
<a href="" title="Voltar ao tópico" class="goBack"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h2><b>Relatório: Curso Primário <img class="emojione" alt=":registered:️" title=":registered:" title=":registered:" src="https://cdn.jsdelivr.net/emojione/assets/png/00ae.png?v=2.2.7"/></b></h2>
<center>
<img src="https://2img.net/i.imgur.com/eMpeuFT.png" alt="some text">
<h4>Preencha os dados abaixo corretamente, caso contrário a Administração irá punir conforme diz as regras do fórum.</h4>
</div>
<h3>Dados do Instrutor</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="cins">Cargo do Instrutor:</label>
<select type="text" name="cins" id="cins" class="form-control js-example-basic-single" required>
<option value="Soldado">Soldado</option>
<option value="Cabo">Cabo</option>
<option value="Sargento">Sargento</option>
<option value="SubTenente">SubTenente</option>
<option value="Major">Major</option>
<option value="Tenente">Tenente</option>
<option value="General">General</option>
<option value="Comandante">Comandante</option>
<option value="Inspetor">Inspetor</option>
<option value="Inspetor Chefe">Inspetor Chefe</option>
<option value="Embaixador">Embaixador</option>
<option value="Coordenador">Coordenador</option>
<option value="Diretor">Diretor</option>
<option value="Diretor Geral">Diretor Geral</option>
<option value="Supremo">Supremo</option>
<option value="Vice Presidente">Vice Presidente</option>
<option value="Presidente">Presidente</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="nins">Nome do Instrutor:</label>
<input type="text" id="nins" class="form-control" placeholder="Nome do Instrutor" required/>
</div>
<div class="form-group-col col-30">
<label for="tag">TAG do Instrutor:</label>
<input type="text" id="tag" class="form-control" placeholder="TAG sem [ ]" maxlength="3" required/>
</div>
</div>
<h3>Dados do Curso Inicial</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="datains">Data da Instrução:</label>
<input type="text" id="datains" class="form-control" disabled/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nsol">Nickname do Aluno:</label>
<input type="text" id="nsol" class="form-control" placeholder="Nome do Recruta" required/>
</div>
<div class="form-group-col col-30">
<label for="aprep">Situação:</label>
<select type="text" name="aprep" id="aprep" class="form-control js-example-basic-single" required>
<option value="Aprovado">Aprovado</option>
<option value="Reprovado">Reprovado</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="resp">Respostas certas:</label>
<input type="number" name="resp" id="resp" class="form-control" max="6" placeholder="Número de respostas certas" required/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<span class="card">OPCIONAL</span>
<label for="observ">Observações:</label>
<textarea data-type="textarea" id="observ" class="form-control" placeholder="Explique todo o rendimento do aluno na aula, incluindo a quantidade de respostas certas, desempenho nos comandos e afins." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<input type="checkbox" name="termos" value="X" required> Concordo em casos de erros eu seja punido.
</div>
</div>
<br/>
<button class="btn btn-primary" type="submit" >Enviar Resposta!</button>
<br>
<form>
<footer>
<div><i class="fas fa-code"></i> Polícia CPE <img class="emojione" alt=":copyright:️" title=":copyright:" title=":copyright:" src="https://cdn.jsdelivr.net/emojione/assets/png/00a9.png?v=2.2.7"/> 2018 - 2020 <b>by</b> Thiag4530 <i class="fas fa-code"></i> </div>
</footer>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var month = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
function formatDate(instance) {
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
return date;
};
var curDate = new Date();
$('#datains').val(formatDate(curDate));
</script>
<script type="text/javascript">
(function ($) {
'use strict';
var topic = '1',
content;
$(function () {
$('.js-example-basic-single').select2();
$('.goBack').attr('href','/t' + topic + '-?view=newest');
$('#form-content').on('submit', function (event) {
var data = {
nins: $('#nins').val(),
cins: $('#cins').val(),
tag: $('#tag').val(),
nsol: $('#nsol').val(),
aprep: $('#aprep').val(),
datains: $('#datains').val(),
observ: $('#observ').val(),
termos: 'X',
codact: ''
};
if(data.aprep == "Aprovado") {
data.codact = data.nsol + ' - ' + data.datains + ' [' + data.tag + ']';
} else {
data.codact = '[color=#ff0000]REPROVADO[/color] - ' + data.datains;
}
if ($('#observaçao').val() === '') {
data.observaçao = 'Observação desnecessária.';
} else {
data.observaçao = $('#observaçao').val();
}
content = [
'[b]Data:[/b] ' + data.datains,
'[b]Responsável:[/b] ' + data.cins + ' ' + data.nins,
'[b]Aluno:[/b] ' + data.nsol,
'[b]Situação:[/b] ' + data.aprep,
'[b]Observações:[/b] ' + data.observ,
'[b]Código de Atualização:[/b] ' + data.codact,
'(' + data.termos + ') Concordo em casos de erros eu seja punido!'
].join('\n');
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: topic,
message: content,
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = 'http://' + location.host + '/t' + topic +'-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Atenciosamente,
pedxz.
Thiag4530- Novo Membro
- Membro desde : 08/01/2020
Mensagens : 6
Pontos : 12 -
Re: Quebra de linha no formulário
por tikky 13.01.20 18:43
Thiag4530 escreveu:Voltou o erro http://prntscr.com/qm679iPedxz escreveu:Altere a página para a seguinte:Caso continue a não postar, verifique se a seguinte opção está marcada como Não, vá ao Painel de controle > Geral > Fórum > Segurança, e localize a opção "Desautorizar formulários não oficiais de postarem no fórum e enviar mensagens privadas"
- Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="https://i.imgur.com/QKXVhYz.png">
<title>Polícia CPE - Relatório de Curso Primário</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #2688dc;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #375e7f;
font-size: 14px;
transition: linear all 125ms;
margin-top: 45%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control, .select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
height: auto;
}
.select2-container--default .select2-selection--single { padding: 2px 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 20%; }
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-46 {
width: 46%;
}
.col-30 {
width: 30%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body class="bg-dark" style="
background: url('https://i.imgur.com/0cTgZqY.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
<main class="wrapper">
<form id="form-content">
<a href="" title="Voltar ao tópico" class="goBack"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h2><b>Relatório: Curso Primário <img class="emojione" alt=":registered:️" title=":registered:" title=":registered:" src="https://cdn.jsdelivr.net/emojione/assets/png/00ae.png?v=2.2.7"/></b></h2>
<center>
<img src="https://2img.net/i.imgur.com/eMpeuFT.png" alt="some text">
<h4>Preencha os dados abaixo corretamente, caso contrário a Administração irá punir conforme diz as regras do fórum.</h4>
</div>
<h3>Dados do Instrutor</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="cins">Cargo do Instrutor:</label>
<select type="text" name="cins" id="cins" class="form-control js-example-basic-single" required>
<option value="Soldado">Soldado</option>
<option value="Cabo">Cabo</option>
<option value="Sargento">Sargento</option>
<option value="SubTenente">SubTenente</option>
<option value="Major">Major</option>
<option value="Tenente">Tenente</option>
<option value="General">General</option>
<option value="Comandante">Comandante</option>
<option value="Inspetor">Inspetor</option>
<option value="Inspetor Chefe">Inspetor Chefe</option>
<option value="Embaixador">Embaixador</option>
<option value="Coordenador">Coordenador</option>
<option value="Diretor">Diretor</option>
<option value="Diretor Geral">Diretor Geral</option>
<option value="Supremo">Supremo</option>
<option value="Vice Presidente">Vice Presidente</option>
<option value="Presidente">Presidente</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="nins">Nome do Instrutor:</label>
<input type="text" id="nins" class="form-control" placeholder="Nome do Instrutor" required/>
</div>
<div class="form-group-col col-30">
<label for="tag">TAG do Instrutor:</label>
<input type="text" id="tag" class="form-control" placeholder="TAG sem [ ]" maxlength="3" required/>
</div>
</div>
<h3>Dados do Curso Inicial</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="datains">Data da Instrução:</label>
<input type="text" id="datains" class="form-control" disabled/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nsol">Nickname do Aluno:</label>
<input type="text" id="nsol" class="form-control" placeholder="Nome do Recruta" required/>
</div>
<div class="form-group-col col-30">
<label for="aprep">Situação:</label>
<select type="text" name="aprep" id="aprep" class="form-control js-example-basic-single" required>
<option value="Aprovado">Aprovado</option>
<option value="Reprovado">Reprovado</option>
</select>
</div>
<div class="form-group-col col-30">
<label for="resp">Respostas certas:</label>
<input type="number" name="resp" id="resp" class="form-control" max="6" placeholder="Número de respostas certas" required/>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<span class="card">OPCIONAL</span>
<label for="observ">Observações:</label>
<textarea data-type="textarea" id="observ" class="form-control" placeholder="Explique todo o rendimento do aluno na aula, incluindo a quantidade de respostas certas, desempenho nos comandos e afins." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<input type="checkbox" name="termos" value="X" required> Concordo em casos de erros eu seja punido.
</div>
</div>
<br/>
<button class="btn btn-primary" type="submit" >Enviar Resposta!</button>
<br>
<form>
<footer>
<div><i class="fas fa-code"></i> Polícia CPE <img class="emojione" alt=":copyright:️" title=":copyright:" title=":copyright:" src="https://cdn.jsdelivr.net/emojione/assets/png/00a9.png?v=2.2.7"/> 2018 - 2020 <b>by</b> Thiag4530 <i class="fas fa-code"></i> </div>
</footer>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var month = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
function formatDate(instance) {
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
return date;
};
var curDate = new Date();
$('#datains').val(formatDate(curDate));
</script>
<script type="text/javascript">
(function ($) {
'use strict';
var topic = '1',
content;
$(function () {
$('.js-example-basic-single').select2();
$('.goBack').attr('href','/t' + topic + '-?view=newest');
$('#form-content').on('submit', function (event) {
var data = {
nins: $('#nins').val(),
cins: $('#cins').val(),
tag: $('#tag').val(),
nsol: $('#nsol').val(),
aprep: $('#aprep').val(),
datains: $('#datains').val(),
observ: $('#observ').val(),
termos: 'X',
codact: ''
};
if(data.aprep == "Aprovado") {
data.codact = data.nsol + ' - ' + data.datains + ' [' + data.tag + ']';
} else {
data.codact = '[color=#ff0000]REPROVADO[/color] - ' + data.datains;
}
if ($('#observaçao').val() === '') {
data.observaçao = 'Observação desnecessária.';
} else {
data.observaçao = $('#observaçao').val();
}
content = [
'[b]Data:[/b] ' + data.datains,
'[b]Responsável:[/b] ' + data.cins + ' ' + data.nins,
'[b]Aluno:[/b] ' + data.nsol,
'[b]Situação:[/b] ' + data.aprep,
'[b]Observações:[/b] ' + data.observ,
'[b]Código de Atualização:[/b] ' + data.codact,
'(' + data.termos + ') Concordo em casos de erros eu seja punido!'
].join('\n');
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: topic,
message: content,
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = 'http://' + location.host + '/t' + topic +'-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Atenciosamente,
pedxz.
Estranho testei em um fórum teste e fez a quebra de linha
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Quebra de linha no formulário
por Convidado 18.01.20 11:08
Questão abandonadaEsta questão foi abandonada pelo seu autor, mas foi considerada resolvida pela equipa de suporte.De acordo com o regulamento do setor de suporte, Art. 5/Deveres, tópicos com 3 dias serão arquivados. Apesar de abandonado, este tópico tem uma solução e portanto será marcado como resolvido e movido para o arquivo de questões resolvidas. |
Convidado- Convidado
Tópicos semelhantes» Formulário não dá quebra de linha
» Formulário personalizado não cria a quebra de linha
» Quebra de linha
» Quebra de linha nos textos
» Quebra de linha no lastpost
» Formulário personalizado não cria a quebra de linha
» Quebra de linha
» Quebra de linha nos textos
» Quebra de linha no lastpost
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos