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

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ต.ค. 2024

ความคิดเห็น • 63

  • @DaviSantos-cw5xr
    @DaviSantos-cw5xr 2 ปีที่แล้ว +58

    O curso é tão bom que eu já entro com o like, sabendo que já vem coisa boa! Vamos ajudar o canal gente!

  • @tiago.sampa_
    @tiago.sampa_ ปีที่แล้ว +25

    📝 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:

  • @Matheuss_77
    @Matheuss_77 ปีที่แล้ว +3

    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 👊👊

  • @_Victor-Lourenco
    @_Victor-Lourenco ปีที่แล้ว +31

    *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).

  • @suellensouza29
    @suellensouza29 2 ปีที่แล้ว +4

    Aula excelente, professor Guanabara! Eu já trabalho na área e tinha algumas coisas aí que eu não sabia. Já me atualizei :D

  • @renatoorosco
    @renatoorosco ปีที่แล้ว +1

    Passando pra agradecer por mais essa aula de qualidade, Master-Ganhanhotossauro-Rex-de-Andrômeda.

  • @viniciusferraz963
    @viniciusferraz963 10 หลายเดือนก่อน +1

    Que aula!

  • @arielesilva2828
    @arielesilva2828 6 หลายเดือนก่อน

    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

  • @wellingkbrd
    @wellingkbrd 2 ปีที่แล้ว +4

    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!

  • @eduardof5-r4t
    @eduardof5-r4t 6 หลายเดือนก่อน

    Excelente aula

  • @robertamenezes5995
    @robertamenezes5995 2 ปีที่แล้ว +1

    Guanabara você é o cara

  • @pedrobrozz
    @pedrobrozz ปีที่แล้ว

    Boaaa Guanabaraa!!!!

  • @quantaburocracia9683
    @quantaburocracia9683 2 ปีที่แล้ว

    Terminei o último exercício em python. Fazer as provas agra :)

  • @Familyhayzn
    @Familyhayzn ปีที่แล้ว

    top

  • @valeskaa827
    @valeskaa827 2 ปีที่แล้ว +1

    button e input do tipo button têm diferença?

  • @Familyhayzn
    @Familyhayzn ปีที่แล้ว

    só eu que dou like e comento antes de ver o vídeo? kkkkkkkkk

  • @MBLGBTQI
    @MBLGBTQI ปีที่แล้ว +2

    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)

  • @ygor8387
    @ygor8387 7 หลายเดือนก่อน

    é so pra mim que quando eu clico em enviar baixa um arquivo chamdo cadastro.php? n sei oq fiz de errado

  • @cristianphelipe6071
    @cristianphelipe6071 2 ปีที่แล้ว +2

    Qual programa é esse que vc usa pra programar ?

    • @luanibonfim6273
      @luanibonfim6273 2 ปีที่แล้ว

      Visual Studio Code

    • @miguelmorassuti3729
      @miguelmorassuti3729 2 ปีที่แล้ว +1

      o ambiente de desenvolvimento que ele usa nesse curso é o Visual Studio Code

  • @flaviocouto3786
    @flaviocouto3786 2 ปีที่แล้ว +3

    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 ปีที่แล้ว +4

      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

  • @kinichi7774
    @kinichi7774 2 ปีที่แล้ว

    First

  • @anavitoriaalmeidadasilva2938
    @anavitoriaalmeidadasilva2938 ปีที่แล้ว

    O input number só aceita 1 ponto e 2 travessões.

  • @Felipe.20
    @Felipe.20 ปีที่แล้ว +1

    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

  • @ShadowbearsCamisas
    @ShadowbearsCamisas 8 หลายเดือนก่อน

    em type eu coloquei 'boolean' e acabou indo numero quebrado

  • @Gostosolucas
    @Gostosolucas ปีที่แล้ว +1

    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 ปีที่แล้ว +1

      vi isso acontecer tambem no meu kkkk

    • @MBLGBTQI
      @MBLGBTQI ปีที่แล้ว +1

      o meu problema é que não esta pegando o
      atributo step

    • @trichains1
      @trichains1 ปีที่แล้ว +4

      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:

  • @luizasantos6614
    @luizasantos6614 25 วันที่ผ่านมา

    10:05 eu tou em 2024 kakakaka

  • @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 ปีที่แล้ว +1

      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 ปีที่แล้ว +1

    [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 ปีที่แล้ว

    11:53 o guanabara colocou meu aniversario, sera que é um sinal ?

    • @renatoorosco
      @renatoorosco ปีที่แล้ว +1

      Pode crer. Um sinal que você vai ser um Mestre Gafanhoto do HTML e CSS.

  • @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 ปีที่แล้ว +3

      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 ปีที่แล้ว +1

      No meu caso, o problema era ao utilizar a extensão Live Server do Visual Studio Code.

    • @viniciuslibanio4602
      @viniciuslibanio4602 ปีที่แล้ว

      Boa @@renatoorosco era exatamente isso !

  • @rodolfocallahan332
    @rodolfocallahan332 2 ปีที่แล้ว

    p͓̽r͓̽o͓̽m͓̽o͓̽s͓̽m͓̽

  • @jonatanb8083
    @jonatanb8083 2 ปีที่แล้ว

    p♥r♥o♥m♥o♥s♥m