Elementos number, month, date e time em formulários HTML - @Curso em Vídeo HTML5 e CSS3

  Рет қаралды 34,684

Curso em Vídeo

Curso em Vídeo

Күн бұрын

Пікірлер
@DaviSantos-cw5xr
@DaviSantos-cw5xr 2 жыл бұрын
O curso é tão bom que eu já entro com o like, sabendo que já vem coisa boa! Vamos ajudar o canal gente!
@jowDev
@jowDev 2 жыл бұрын
Ta achando o material de apoio ?
@periclesperesoficial
@periclesperesoficial 2 жыл бұрын
somos dois kkk
@zw4396
@zw4396 2 ай бұрын
Ótimo vídeo! 👏 Aqui vai um resumo rápido sobre os tipos de inputs e atributos do HTML5: ✅ Inputs: number: Só aceita números, com botões giratórios pra ajustar valores. Placeholder funciona normalmente. month: Seleção de mês e ano, com menu interativo. Formato enviado: yyyy-mm. date: Para datas completas (dia/mês/ano), com calendário. Formato: yyyy-mm-dd. time: Para hora e minuto (opcionalmente segundos). Formato: hh:mm. ✅ Atributos úteis: min/max: Define valores mínimos e máximos. Mostra alerta se ultrapassado. step: Define o intervalo de avanço nos botões giratórios (ex: de 3 em 3). value: Preenche o input com um valor inicial (invalida o placeholder). Dica: Use ou placeholder pra orientar o usuário. 🚀
@Matheuss_77
@Matheuss_77 Жыл бұрын
Ja tava pensando em desistir do código que fiz pois não tava enviando mas a minha persistência falou mais alto e consegui descobrir o erro. O negócio mesmo é ir além e não desistir 👊👊
@lucas12454221
@lucas12454221 Жыл бұрын
qual era o erro ?
@renatoorosco
@renatoorosco 2 жыл бұрын
Passando pra agradecer por mais essa aula de qualidade, Master-Ganhanhotossauro-Rex-de-Andrômeda.
@suellensouza29
@suellensouza29 2 жыл бұрын
Aula excelente, professor Guanabara! Eu já trabalho na área e tinha algumas coisas aí que eu não sabia. Já me atualizei :D
@viniciusferraz963
@viniciusferraz963 Жыл бұрын
Que aula!
@tiago.sampa_
@tiago.sampa_ Жыл бұрын
📝 LEMBRE-SE: *Input de número:* Ex: *Valores mínimo e máximo para o número:* min=" " max=" " Ex: *Trabalhando com decimais:* step=" " (passo, de quanto em quanto o número varia) Ex: *Valor padrão inicial* (será exibido no lugar do placeholder): value=" " Ex: *Input de mês:* Ex: *Input de data:* Ex: *Input de hora:* Ex:
@Familyhayzn
@Familyhayzn Жыл бұрын
obrigado
@wilsonjunior3051
@wilsonjunior3051 Жыл бұрын
Valeu irmão💯
@christianfrancisco6414
@christianfrancisco6414 Жыл бұрын
up
@ramiro1410
@ramiro1410 10 ай бұрын
cara eu te amo, tudo que tu coloca nos comentarios eu copio
@eduardof5-r4t
@eduardof5-r4t 9 ай бұрын
Excelente aula
@pedrobrozz
@pedrobrozz Жыл бұрын
Boaaa Guanabaraa!!!!
@ariele.devfront
@ariele.devfront 9 ай бұрын
Cara você é o melhor ❤
@radiopuntzpuntz9264
@radiopuntzpuntz9264 2 жыл бұрын
acabei de terminar o mundo 1 do python que bom que o curso em video ainda continua com cursos vou fazer outros parabens pelo projeto
@_Victor-Lourenco
@_Victor-Lourenco Жыл бұрын
*TIPOS DE INPUT PARA FORMULÁRIOS:* *number:* O input do tipo number cria uma caixa para que o usuário possa digitar números... Letras não são aceitas nesse input. O elemento é mostrado como uma caixa de edição de uma linha que só aceita a entrada de números (ela também aceita a entrada dos caracteres "sinal de menos e mais", "vírgula" e "ponto")... A caixa desse input também possui "botões giratórios" (setas de passo para cima e para baixo) que permitem que o usuário aumente ou diminua o valor numérico usando o mouse. A forma com que esses botões são exibidos depende também do navegador do usuário, pode variar entre os navegadores. *Obs.:* No caso das dicas por placeholder, elas aparecem normalmente na caixa desse input, mesmo que seja uma frase (letras). *month:* O input do tipo month cria uma caixa que permite que o usuário insira um mês e um ano. O elemento é mostrado como uma caixa de edição de uma linha que aceita um mês e um ano. A caixa desse input também possui um pequeno menu, que pode ser aberto e permiti escolher o mês e o ano com o mouse através de uma interface com botões giratórios e um calendário. A forma com que esse menu é exibido depende também do navegador do usuário, pode variar entre os navegadores. *Obs.:* Quando o dado desse tipo de input é enviado para o servidor, sua sintaxe (sintaxe = forma como é escrito) é a seguinte: _yyyy-mm_ *date:* O input do tipo date cria uma caixa que permite que o usuário insira um dia, mês e ano... Uma data completa. O elemento é mostrado como uma caixa de edição de uma linha que aceita um dia, mês e ano. A caixa desse input também possui um pequeno menu, que pode ser aberto e permiti escolher o dia/mês/ano com o mouse através de uma interface com botões giratórios e um calendário. A forma com que esse menu é exibido depende também do navegador do usuário, pode variar entre os navegadores. *Obs.:* Quando o dado desse tipo de input é enviado para o servidor, sua sintaxe (sintaxe = forma como é escrito) é a seguinte: _yyyy-mm-dd_ *time:* O input do tipo time cria uma caixa que permite que o usuário insira uma hora. O elemento é mostrado como uma caixa de edição de uma linha que aceita horas e minutos (opcionalmente segundos). A caixa desse input também possui um pequeno menu, que pode ser aberto e permiti escolher a hora e o minuto com o mouse através de uma interface com botões giratórios. A forma com que esse menu é exibido depende também do navegador do usuário, pode variar entre os navegadores. *Obs.:* Quando o dado desse tipo de input é enviado para o servidor, sua sintaxe (sintaxe = forma como é escrito) é a seguinte: _hh:mm_ *ATRIBUTOS PRÓPRIOS MAIS USADOS PARA OS INPUTS DESCRITOS ACIMA:* Tenha em mente que nem todo atributo funciona em todos os componentes de entrada (inputs), por isso é importante que você sempre vá treinando e testando conforme a sua necessidade. *min:* Você pode usar esse atributo para estabelecer um valor mínimo que é aceitável e válido para o respectivo input. Por exemplo: Usar o atributo min com o valor 8 (min="8") no input number, especificando que o conteúdo numérico deva ter um valor mínimo igual a 8. Dessa forma, o usuário não poderá executar a submissão do formulário até inserir um número que atenda essa condição (que seja igual ou maior que 8). Obs.: Caso o user insira um conteúdo com um valor menor do que o determinado, um pequeno balão embaixo do campo alertando o valor mínimo aceito aparece. Nota: Não confunda o atributo "minlength" com o "min". O atributo minlength serve para literalmente estabelecer um tamanho mínimo aceitável em quantidade de caracteres para o conteúdo de um input. Já o atributo min serve para estabelecer um valor mínimo aceitável no que se refere ao valor do conteúdo propriamente dito. O atributo "min" é válido para os inputs do tipo number, date, month, time e mais alguns outros (serve para inputs numéricos de forma geral)... Para cara um desses inputs, a sintaxe do VALOR do atributo muda (sintaxe = forma como é escrito). Segue um exemplo: Sintaxe do VALOR do atributo "min" para um input do tipo date: _yyyy-mm-dd_ Sintaxe do VALOR do atributo "min" para um input do tipo month: _yyyy-mm_ Sintaxe do VALOR do atributo "min" para um input do tipo time: _hh:mm_ Sintaxe do VALOR do atributo "min" para um input do tipo number: _número mínimo_ Ao usar o atributo min, certifique-se de que esse requisito mínimo seja compreendido pelo usuário. Fornecer instruções no ou pelo placeholder pode ser suficiente. *max:* Você pode usar esse atributo para estabelecer um valor máximo que é aceitável e válido para o respectivo input. Por exemplo: Usar o atributo max com o valor 15 (max="15") no input number, especificando que o conteúdo numérico deva ter um valor de no máximo 15. Dessa forma, o usuário não poderá executar a submissão do formulário até inserir um número que atenda essa condição (que possua um valor de no máximo 15). Obs.: Caso o user insira um conteúdo com um valor maior do que o determinado, um pequeno balão embaixo do campo alertando o valor máximo aceito aparece. Nota: Não confunda o atributo "maxlength" com o "max". O atributo maxlength serve para literalmente estabelecer um tamanho máximo aceitável em quantidade de caracteres para o conteúdo de um input. Já o atributo max serve para estabelecer um valor máximo aceitável no que se refere ao valor do conteúdo propriamente dito. O atributo "max" é válido para os inputs do tipo number, date, month, time e mais alguns outros (serve para inputs numéricos de forma geral)... Para cara um desses inputs, a sintaxe do VALOR do atributo muda (sintaxe = forma como é escrito). Segue um exemplo: Sintaxe do VALOR do atributo "max" para um input do tipo date: _yyyy-mm-dd_ Sintaxe do VALOR do atributo "max" para um input do tipo month: _yyyy-mm_ Sintaxe do VALOR do atributo "max" para um input do tipo time: _hh:mm_ Sintaxe do VALOR do atributo "max" para um input do tipo number: _número máximo_ Ao usar o atributo max, certifique-se de que esse requisito máximo seja compreendido pelo usuário. Fornecer instruções no ou pelo placeholder pode ser suficiente. *step:* O atributo step é um número que especifica a granularidade (intervalo em unidades) à qual o valor de uma caixa input deve aderir. A step define o INTERVALO de passo ao clicar nos "botões giratórios" para cima e para baixo, ao mover um controle deslizante... Por exemplo: Usar o atributo step com o valor 3 (step="3") no input number... Especificando que, ao clicarmos nos "botões giratórios", o conteúdo numérico da caixa deve AUMENTAR OU DIMINUIR de três em três unidades. O atributo "step" é válido para os inputs do tipo number, date, month, time e mais alguns outros (serve para inputs numéricos de forma geral)... A sintaxe do valor do atributo é a mesma para todos esses inputs, que dever ser um número especificando o intervalo de passo Obs.: No caso do input time, o número deve ser referente aos segundos - se você quiser determinar um intervalor de três em três minutos por exemplo, deve fazer isso inserindo o valor "180" segundos (três minutos). Um valor menor do que 60 segundos no step para "time" permitirá que, além das horas e minutos, o formato do campo expanda para que o usuário também possa inserir os segundos. Como valor de step, se você colocar um número inteiro (ex: 3). Isso fará com que apenas inteiros sejam inseridos na caixa. Se você quiser que a base de passo decorra em forma de um número quebrado (ex: 3.4, 3.5, 3.6 e por aí vai...), você deve inserir no atributo um valor numérico quebrado (ex: 0.1). Se não for explicitamente incluída, a step assumirá por padrão o valor "1" para number, e "1" para algum tipo de unidade (minuto, semana, mês, dia) para os tipos de input de data/hora. Não podendo assim trabalhar com números quebrados... Para conseguir trabalhar com números quebrados e não precisar especificar um valor, você pode colocar no "step" o valor "any" (qualquer). *Atenção:* O atributo step especifica um intervalo de unidades de avanço ou retorno para o valor de um input nos "botões giratórios" da caixa, entretanto o usuário ainda pode inserir valores de forma manual... E inclusive fazer isso inserindo valores que estão fora do intervalo de unidades determinado no atributo step. No entanto, ao fazer isso, o usuário não irá conseguir executar a submissão do formulário (Caso o user insira um conteúdo com um valor fora do intervalo especificado, um pequeno balão embaixo do campo alertando os valores válidos mais próximos aceitos aparece). *value:* Você pode usar esse atributo para estabelecer um valor inicial para um componente de entrada (input). Por exemplo: Usar o atributo value com o valor "10" (value="10") no input number, especificando que o conteúdo inicial da caixa deve ser 10. Dessa forma, ao abrir a página, o input já será carregado com esse valor preenchido no formulário. *Nota:* Utilizar o atributo "value" torna a execução do atributo "placeholder" inválida... Isso ocorre porque o campo já será carregado preenchido, impedindo a visualização da dica. O atributo "value" é válido para os inputs do tipo number, date, month, time e muitos outros (serve para inputs numéricos, mas também é válido para botões de opção, caixa de seleção, elementos de opção...) Para cara um desses inputs, a sintaxe do VALOR do atributo muda (sintaxe = forma como é escrito).
@christianfrancisco6414
@christianfrancisco6414 Жыл бұрын
up
@DevNoro
@DevNoro Жыл бұрын
Parabéns e obrigado mano, te amo.
@robertamenezes5995
@robertamenezes5995 2 жыл бұрын
Guanabara você é o cara
@Familyhayzn
@Familyhayzn Жыл бұрын
top
@quantaburocracia9683
@quantaburocracia9683 2 жыл бұрын
Terminei o último exercício em python. Fazer as provas agra :)
@Familyhayzn
@Familyhayzn Жыл бұрын
só eu que dou like e comento antes de ver o vídeo? kkkkkkkkk
@luizasantos6614
@luizasantos6614 3 ай бұрын
10:05 eu tou em 2024 kakakaka
@MBLGBTQI
@MBLGBTQI Жыл бұрын
6:26 se o de step de vocês não estiver pegando, ao invés de usar step="0,5" usa o step="0.5" (troca a virgula pelo ponto)
@wellingkbrd
@wellingkbrd 2 жыл бұрын
Guanabara, suas aulas são excelentes. Muito obrigado por compartilhar conhecimento! Tenho uma dúvida sobre o input de data: Existe a possibilidade de fazer um input sem o ano, ou seja, apenas dia e mês? Neste caso seria diretamente no HTML ou é preciso manipular via Js? Um grande abraço!
@valeskaa827
@valeskaa827 2 жыл бұрын
button e input do tipo button têm diferença?
@kinichi7774
@kinichi7774 2 жыл бұрын
First
@flaviocouto3786
@flaviocouto3786 2 жыл бұрын
Pessoal, uso o Crhome como navegador e os valores digitados nos formulários não aparecem na URL, o navegador não é compatível com arquivos PHP. Alguém pode me ajudar? Muito Grato - Flávio
@Gostosolucas
@Gostosolucas Жыл бұрын
na verdade, o seu problema pode ser o mesmo que o meu, eu abri o html usando a extensão do Live Server, eu não sei o motivo mas esta extensão parece que não aceita arquivos com a extensão .php solução: abra o seu html diretamente pelos seus arquivos lá no explorador de arquivos.
@MBLGBTQI
@MBLGBTQI Жыл бұрын
@@Gostosolucas isso! tinha acontecido a mesma coisa comigo
@cristianphelipe6071
@cristianphelipe6071 2 жыл бұрын
Qual programa é esse que vc usa pra programar ?
@luanibonfim6273
@luanibonfim6273 2 жыл бұрын
Visual Studio Code
@miguelmorassuti
@miguelmorassuti 2 жыл бұрын
o ambiente de desenvolvimento que ele usa nesse curso é o Visual Studio Code
@ygor8387
@ygor8387 10 ай бұрын
é so pra mim que quando eu clico em enviar baixa um arquivo chamdo cadastro.php? n sei oq fiz de errado
@anavitoriaalmeidadasilva2938
@anavitoriaalmeidadasilva2938 Жыл бұрын
O input number só aceita 1 ponto e 2 travessões.
@Felipe.20
@Felipe.20 Жыл бұрын
pessoal, me ajudem em um duvida. Eu nao estou conseguindo "linkar" a pagina PHP com o formulário, quando eu clico em enviar, ou ele da aquela pagina de erro ou ele baixa um arquivo "cadastro.php". Estou tentando um monte de coisa mas nao consegui resolver, *Help*
@lucasvilasboas7326
@lucasvilasboas7326 Жыл бұрын
Opa e ai amigo ja resolveu ? No meu caso esta funcionando assim ..... Detalhe que o cadastro.php esta na mesma pasta dos forms .... entao do form01 ate o form99999999 todos vao enviar para o mesmo documento
@Gostosolucas
@Gostosolucas Жыл бұрын
pessoal preciso de uma ajudinha(nada muito importante) : quando eu uso o input type number, ele permite uma letra, no caso a letra 'e', se vc digitar qualquer coisa ele bloquei permitindo apenas números e a letra 'e' alguém sabe dizer pq?
@MBLGBTQI
@MBLGBTQI Жыл бұрын
vi isso acontecer tambem no meu kkkk
@MBLGBTQI
@MBLGBTQI Жыл бұрын
o meu problema é que não esta pegando o atributo step
@trichains1
@trichains1 Жыл бұрын
Geralmente aparece quando o usuário insere um número em notação científica, por exemplo, "5e2" que significa "cinco vezes dez elevado a dois" ou 500. Nesse caso, eu acho que o melhor a se fazer é usar o atributo "pattern" em conjunto, para permitir apenas caracteres numéricos e o ponto decimal Ex: ‎ ‎
@MatheusFelipe-pz6ht
@MatheusFelipe-pz6ht 2 жыл бұрын
Pessoal, não consigo encontrar os PDFs depois do capítulo 20 lá na pasta do GitHub. Alguém sabe se tem, ou parou no 20 mesmo?
@periclesperesoficial
@periclesperesoficial 2 жыл бұрын
Pelo jeito parou.
@rafa-san
@rafa-san Жыл бұрын
Tem lá no repositório dele. Procure pelos commits de 10 de outubro de 2020 que você encontra...
@estevam1223
@estevam1223 2 жыл бұрын
[DÚVIDA DE INICIANTE] o meu exclamação + enter/TAB, não tá funcionando para auto completar da estrutura básica do HTML. Alguém mais com esse problema no VS Code? agradeço
@luanibonfim6273
@luanibonfim6273 2 жыл бұрын
digita html que vai aparecer as opções, e coloca html:5 O meu também estava com esse problema :)
@esfcexcapproject5634
@esfcexcapproject5634 2 жыл бұрын
O meu tbm está com esse problema. Estou digitando html 5 e tá dando certo.
@renegildo4408
@renegildo4408 2 жыл бұрын
parece que ja resolveram agora
@esfcexcapproject5634
@esfcexcapproject5634 2 жыл бұрын
@@renegildo4408 sim, já voltei a usar o ! Novamente. Acho que era algum bug do próprio vs code.
@Jcst3ch
@Jcst3ch 2 жыл бұрын
O meu fica assim tbm as vezes.
@GABRIELMANECO
@GABRIELMANECO 2 жыл бұрын
11:53 o guanabara colocou meu aniversario, sera que é um sinal ?
@renatoorosco
@renatoorosco 2 жыл бұрын
Pode crer. Um sinal que você vai ser um Mestre Gafanhoto do HTML e CSS.
@ShadowbearsCamisas
@ShadowbearsCamisas 11 ай бұрын
em type eu coloquei 'boolean' e acabou indo numero quebrado
@lucasfreitas4932
@lucasfreitas4932 2 жыл бұрын
Bom dia! Meus formulários não abrem o arquivo .php, só faz download, no método get, ou abre "página não encontrada" no método post. Alguém pode me ajudar???
@SrSeven7
@SrSeven7 2 жыл бұрын
O mesmo aqui comigo. Tentei no Firefox e no Edge, mas não resolveu, não sei o que estou fazendo de errado.
@renegildo4408
@renegildo4408 2 жыл бұрын
Olha, eu estava usando a extensão "Live Server" pra poder executar os arquivos, uso o Opera GX e pra resolver esse problema eu executei o arquivo .html e não usando a extensão
@renatoorosco
@renatoorosco 2 жыл бұрын
No meu caso, o problema era ao utilizar a extensão Live Server do Visual Studio Code.
@viniciuslibanio4602
@viniciuslibanio4602 Жыл бұрын
Boa @@renatoorosco era exatamente isso !
@jonatanb8083
@jonatanb8083 2 жыл бұрын
p♥r♥o♥m♥o♥s♥m
@rodolfocallahan332
@rodolfocallahan332 2 жыл бұрын
p͓̽r͓̽o͓̽m͓̽o͓̽s͓̽m͓̽
Compatibilidade com navegadores - @Curso em Vídeo HTML5 e CSS3
11:27
Curso em Vídeo
Рет қаралды 27 М.
UFC 310 : Рахмонов VS Мачадо Гэрри
05:00
Setanta Sports UFC
Рет қаралды 1,2 МЛН
Каха и дочка
00:28
К-Media
Рет қаралды 3,4 МЛН
Front-end, Back-end e Full stack - @Curso em Vídeo HTML5 e CSS3
19:22
Curso em Vídeo
Рет қаралды 656 М.
Criando caixas de texto e de senha - @Curso em Vídeo HTML5 e CSS3
18:08
O que é o objeto DATE no JAVASCRIPT?
7:42
Trybe
Рет қаралды 4,7 М.
Learn HTML Forms In 25 Minutes
24:56
Web Dev Simplified
Рет қаралды 999 М.