SlideShare uma empresa Scribd logo
1 de 5
Baixar para ler offline
11/17/2015 <select> ­ HTML | MDN
https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 1/5
<select>
by 2 colaboradores:
Sumário
O elemento HTML select (<select>) representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo
elemento <option>, que podem ser agrupados por elementos <optgroup>. As opções podem ser pré-selecionadas para o usuário.
Contexto de uso
Categorias de conteúdo
conteúdo fluido, conteúdo fraseado, conteúdo interativo, listado, rotulável, resetável, e enviável associado a
formulários
Conteúdo permitido Zero ou mais elementos <option> ou <optgroup>.
Omissão de tag Nenhuma, tanto tag de início quanto de fim são obrigatórias
Elementos pai
permitidos
qualquer elemento que aceite conteúdo fraseado
Atributos
Este elemento inclui os atributos globais.
11/17/2015 <select> ­ HTML | MDN
https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 2/5
autofocus HTML5
Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o
substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o
atributo autofocus, que é booleano.
disabled
Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a
configuração do elemento que o contém, por exemplo o elemento fieldset; se não há nenhum elemento que o contém com o
atributo disabled, então o controle está habilitado.
form HTML5
O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve
ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e
não apenas como descendentes de elementos form.
multiple
Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser
selecionada de cada vez.
name
O nome do controle
required HTML5
Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada.
size
Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num
determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0.
11/17/2015 <select> ­ HTML | MDN
https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 3/5
Nota sobre o Firefox: De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites,
e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox.
Interface DOM
Este elemento implementa a interface HTMLSelectElement.
Exemplos
Resultado
Valor 2
Notas
O conteúdo deste elemento é estático e não editável.
A seguir um exemplo de como simular uma lista de seleção com opções editáveis, mas esteja ciente de que leitores de tela e dispositivos de
acessibilidade não interpretarão o formulário corretamente; este exemplo seria HTML inválido se os elementos corretos fossem usados:
Este é um exemplo de um select editável usando um <fieldset> de botões de opção e caixas de texto (escrito somente com CSS, sem JavaScript), 
Especificações

<!‐‐ O segundo valor estará selecionado inicialmente ‐‐>
<select name="select">
  <option value="valor1">Valor 1</option> 
  <option value="valor2" selected>Valor 2</option>
  <option value="valor3">Valor 3</option>
</select>
1
2
3
4
5
6
11/17/2015 <select> ­ HTML | MDN
https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 4/5
Especificações
Especificação Estado Comentários
HTML5
The definition of '<select>' in that specification.
REC Recommendation  
HTML 4.01 Specification
The definition of '<select>' in that specification.
REC Recommendation  
     
Compatibilidade de navegadores
 
[1] No aplicativo Browser para Android 4.1 (e possivelmente versões posteriores), há um bug em que o triângulo indicador de menu ao lado de um
<select> não será exibido se background, border ou border‐radius forem aplicados ao <select>.
[2] Firefox para Android, por padrão, define uma background‐image gradiente em todos os elementos <select multiple>. Isso pode ser desabilitado
usando background‐image: none.
 
Veja também


Mobile
Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Atributo required (Yes) 4.0 (2.0) 10 (Yes) (Yes)
Desktop
11/17/2015 <select> ­ HTML | MDN
https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 5/5
Veja também
Outros elementos relacionados a formulários: <form>, <legend>, <label>, <button>, <option>, <datalist>, <optgroup>, <fieldset>,
<textarea>, <keygen>, <input>, <output>, <progress> e <meter>.

Mais conteúdo relacionado

Destaque

Case study general direct
Case study  general directCase study  general direct
Case study general directJulia Guerra
 
El fin del uruguay liberal2
El fin del uruguay liberal2El fin del uruguay liberal2
El fin del uruguay liberal2ANA CODINA
 
La dictadura civico militar
La dictadura civico militarLa dictadura civico militar
La dictadura civico militarANA CODINA
 
Guerrilla y autoritarismo 1967 1973
Guerrilla y autoritarismo 1967   1973Guerrilla y autoritarismo 1967   1973
Guerrilla y autoritarismo 1967 1973ANA CODINA
 
01 Publicaciones Sobre Arte Y Fotos
01 Publicaciones Sobre Arte Y Fotos01 Publicaciones Sobre Arte Y Fotos
01 Publicaciones Sobre Arte Y Fotosedudacosta.foto
 
Karbon Dioksida sebagai Refrigeran Ramah Lingkungan
Karbon Dioksida sebagai Refrigeran Ramah LingkunganKarbon Dioksida sebagai Refrigeran Ramah Lingkungan
Karbon Dioksida sebagai Refrigeran Ramah LingkunganFarida Ramdani
 
Dafpus revisi` nonik aisyah rohman-g41150606
Dafpus revisi` nonik aisyah rohman-g41150606Dafpus revisi` nonik aisyah rohman-g41150606
Dafpus revisi` nonik aisyah rohman-g41150606Nonik Rohman
 

Destaque (10)

Webinar Ad
Webinar AdWebinar Ad
Webinar Ad
 
Case study general direct
Case study  general directCase study  general direct
Case study general direct
 
Resume
ResumeResume
Resume
 
El fin del uruguay liberal2
El fin del uruguay liberal2El fin del uruguay liberal2
El fin del uruguay liberal2
 
La dictadura civico militar
La dictadura civico militarLa dictadura civico militar
La dictadura civico militar
 
Guerrilla y autoritarismo 1967 1973
Guerrilla y autoritarismo 1967   1973Guerrilla y autoritarismo 1967   1973
Guerrilla y autoritarismo 1967 1973
 
01 Publicaciones Sobre Arte Y Fotos
01 Publicaciones Sobre Arte Y Fotos01 Publicaciones Sobre Arte Y Fotos
01 Publicaciones Sobre Arte Y Fotos
 
How rainbow is formed
How rainbow is formedHow rainbow is formed
How rainbow is formed
 
Karbon Dioksida sebagai Refrigeran Ramah Lingkungan
Karbon Dioksida sebagai Refrigeran Ramah LingkunganKarbon Dioksida sebagai Refrigeran Ramah Lingkungan
Karbon Dioksida sebagai Refrigeran Ramah Lingkungan
 
Dafpus revisi` nonik aisyah rohman-g41150606
Dafpus revisi` nonik aisyah rohman-g41150606Dafpus revisi` nonik aisyah rohman-g41150606
Dafpus revisi` nonik aisyah rohman-g41150606
 

Semelhante a Elemento HTML select

Settings Activities - Criando atividades de configuração para aplicações And...
Settings Activities  - Criando atividades de configuração para aplicações And...Settings Activities  - Criando atividades de configuração para aplicações And...
Settings Activities - Criando atividades de configuração para aplicações And...william-costa
 
Relatório do site-detalhado
Relatório do site-detalhadoRelatório do site-detalhado
Relatório do site-detalhadoanabelatriguinho
 
09 Java Script - As formas de usar
09  Java Script  - As formas de usar09  Java Script  - As formas de usar
09 Java Script - As formas de usarCentro Paula Souza
 
Aula 01 web server controls
Aula 01   web server controlsAula 01   web server controls
Aula 01 web server controlsGabriel Bugano
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavoGustavo Passos
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojofabioginzel
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Leandro Rezende
 
Robot Framework - principais características
Robot Framework - principais característicasRobot Framework - principais características
Robot Framework - principais característicasalinebiath
 
Secretaria de Educação - Avaliação Web 2013
Secretaria de Educação -  Avaliação Web 2013Secretaria de Educação -  Avaliação Web 2013
Secretaria de Educação - Avaliação Web 2013Hudson Augusto
 
Manual vsflexgrid
Manual vsflexgridManual vsflexgrid
Manual vsflexgridmarcos0512
 

Semelhante a Elemento HTML select (20)

Php Básico - Parte 2
Php Básico - Parte 2Php Básico - Parte 2
Php Básico - Parte 2
 
Relatório google
Relatório googleRelatório google
Relatório google
 
Settings Activities - Criando atividades de configuração para aplicações And...
Settings Activities  - Criando atividades de configuração para aplicações And...Settings Activities  - Criando atividades de configuração para aplicações And...
Settings Activities - Criando atividades de configuração para aplicações And...
 
Relatório do site-detalhado
Relatório do site-detalhadoRelatório do site-detalhado
Relatório do site-detalhado
 
09 Java Script - As formas de usar
09  Java Script  - As formas de usar09  Java Script  - As formas de usar
09 Java Script - As formas de usar
 
Aula 01 web server controls
Aula 01   web server controlsAula 01   web server controls
Aula 01 web server controls
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Java swingcomponentes
Java swingcomponentesJava swingcomponentes
Java swingcomponentes
 
HTML5: Primeiros Contatos (visão geral)
HTML5: Primeiros Contatos (visão geral)HTML5: Primeiros Contatos (visão geral)
HTML5: Primeiros Contatos (visão geral)
 
Tópico 1 - Acessibilidade
Tópico 1 - AcessibilidadeTópico 1 - Acessibilidade
Tópico 1 - Acessibilidade
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
Página inicial - Acessibilidade
Página inicial - AcessibilidadePágina inicial - Acessibilidade
Página inicial - Acessibilidade
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02
 
Aula1
Aula1Aula1
Aula1
 
Robot Framework - principais características
Robot Framework - principais característicasRobot Framework - principais características
Robot Framework - principais características
 
Secretaria de Educação - Avaliação Web 2013
Secretaria de Educação -  Avaliação Web 2013Secretaria de Educação -  Avaliação Web 2013
Secretaria de Educação - Avaliação Web 2013
 
Manual vsflexgrid
Manual vsflexgridManual vsflexgrid
Manual vsflexgrid
 
Tópico 2 - Acessibilidade
Tópico 2 - AcessibilidadeTópico 2 - Acessibilidade
Tópico 2 - Acessibilidade
 

Elemento HTML select

  • 1. 11/17/2015 <select> ­ HTML | MDN https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 1/5 <select> by 2 colaboradores: Sumário O elemento HTML select (<select>) representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento <option>, que podem ser agrupados por elementos <optgroup>. As opções podem ser pré-selecionadas para o usuário. Contexto de uso Categorias de conteúdo conteúdo fluido, conteúdo fraseado, conteúdo interativo, listado, rotulável, resetável, e enviável associado a formulários Conteúdo permitido Zero ou mais elementos <option> ou <optgroup>. Omissão de tag Nenhuma, tanto tag de início quanto de fim são obrigatórias Elementos pai permitidos qualquer elemento que aceite conteúdo fraseado Atributos Este elemento inclui os atributos globais.
  • 2. 11/17/2015 <select> ­ HTML | MDN https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 2/5 autofocus HTML5 Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o atributo autofocus, que é booleano. disabled Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a configuração do elemento que o contém, por exemplo o elemento fieldset; se não há nenhum elemento que o contém com o atributo disabled, então o controle está habilitado. form HTML5 O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e não apenas como descendentes de elementos form. multiple Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser selecionada de cada vez. name O nome do controle required HTML5 Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada. size Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0.
  • 3. 11/17/2015 <select> ­ HTML | MDN https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 3/5 Nota sobre o Firefox: De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites, e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox. Interface DOM Este elemento implementa a interface HTMLSelectElement. Exemplos Resultado Valor 2 Notas O conteúdo deste elemento é estático e não editável. A seguir um exemplo de como simular uma lista de seleção com opções editáveis, mas esteja ciente de que leitores de tela e dispositivos de acessibilidade não interpretarão o formulário corretamente; este exemplo seria HTML inválido se os elementos corretos fossem usados: Este é um exemplo de um select editável usando um <fieldset> de botões de opção e caixas de texto (escrito somente com CSS, sem JavaScript),  Especificações  <!‐‐ O segundo valor estará selecionado inicialmente ‐‐> <select name="select">   <option value="valor1">Valor 1</option>    <option value="valor2" selected>Valor 2</option>   <option value="valor3">Valor 3</option> </select> 1 2 3 4 5 6
  • 4. 11/17/2015 <select> ­ HTML | MDN https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 4/5 Especificações Especificação Estado Comentários HTML5 The definition of '<select>' in that specification. REC Recommendation   HTML 4.01 Specification The definition of '<select>' in that specification. REC Recommendation         Compatibilidade de navegadores   [1] No aplicativo Browser para Android 4.1 (e possivelmente versões posteriores), há um bug em que o triângulo indicador de menu ao lado de um <select> não será exibido se background, border ou border‐radius forem aplicados ao <select>. [2] Firefox para Android, por padrão, define uma background‐image gradiente em todos os elementos <select multiple>. Isso pode ser desabilitado usando background‐image: none.   Veja também   Mobile Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari Suporte básico 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes) Atributo required (Yes) 4.0 (2.0) 10 (Yes) (Yes) Desktop
  • 5. 11/17/2015 <select> ­ HTML | MDN https://developer.mozilla.org/pt­BR/docs/Web/HTML/Element/select 5/5 Veja também Outros elementos relacionados a formulários: <form>, <legend>, <label>, <button>, <option>, <datalist>, <optgroup>, <fieldset>, <textarea>, <keygen>, <input>, <output>, <progress> e <meter>.