Aprendendo HTML Parte 33: Usando Arquivos de Tipo de Entrada, Aceitar Atributos e Imagem do Tipo de Entrada em Formulários HTML

Para alguns propósitos, você certamente éprecisa de um formulário que possa carregar anexos de arquivo ou imagem em seu site, por exemplo, anexos de currículo, portfólios, fotos e outros. Agora, para fazer a função de upload, use a tag <input>. A tag <input> é usada para criar elementos para solicitar informações do usuário.

Nos tutoriais anteriores, temosaprenda o uso de tags <input> com tipos de entrada, como texto, senha, envio, caixa de seleção e rádio. Bem, neste tutorial, o que será discutido é o uso da tag <input> com o tipo de arquivo de entrada e a imagem a seguir com o atributo accept. Para mais detalhes sobre os dois valores e atributos do tipo de entrada, vejamos o tutorial abaixo:

Tipo de arquivo de entrada

Tags de entrada com o atributo type = "file" são usadospara fazer upload de arquivos. Em geral, o uso do atributo type = "file" está relacionado ao uso do PHP. A seguir, é apresentado um exemplo de gravação e uso da tag <input> com o tipo "arquivo" no formulário HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Input Tipe File pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
NIM : <input type="text" name="nim" size="11" maxlength="9"> <br><br>
Upload CV : <input type="file" name="cv"> <br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

A exibição no navegador como esta:

O navegador exibirá um botão com o texto da legenda ao lado, onde o nome do botão e o texto da legenda diferem dependendo do navegador da web usado.

Aceitar Atributo

O atributo accept é usado para especificar oulimite os tipos de arquivos que podem ser carregados, sejam arquivos de música, documentos, arquivos de imagem ou outros. Este atributo é usado quando você usa a marca <input> com o atributo type = "file". Os valores deste atributo são:

Extensão do arquivo: extensão de arquivo que começa com um período como .doc, .pdf, .jpg.
audio / *
imagem / *
video / *

Mesmo usando o atributo accept, userpode alterar facilmente o tipo de arquivo carregado. Portanto, é melhor se a restrição de tipo de arquivo também for determinada no lado do servidor da web com PHP. A seguir, é apresentado um exemplo de gravação e uso do atributo accept nos formulários HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Accept pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Judul Lagu : <input type="text" name="lagu" size="11"> <br><br>
Mp3 : <input type="file" name="file_musik" accept="audio/*"> <br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

Após a execução do código acima no navegador, ele aparecerá como mostrado abaixo:

Tipo de imagem de entrada

Tags de entrada com o atributo type = "image" são usadospara inserir uma imagem no formulário. Onde a imagem serve como um objeto de formulário que pode ser clicado pelo usuário. Então, quando o usuário clicar na imagem, o navegador exibirá as coordenadas do ponto em que a imagem foi clicada.

Embora raramente usado, você pode usarimagem de tipo de entrada para exibir outras imagens quando o usuário clica em determinadas coordenadas. Aqui abaixo está um exemplo do código para escrever e usar imagens do tipo de entrada em formulários HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Input Type Image pada Form HTML</title>
</head>
<body>
<h4>Contoh Penggunaan Input Type Image pada Form HTML</h4>
<form action="proses_gambar.php" method="get">
<input type="image" src="pantai.jpg" alt="pantai" width="400">
</form>
</body>
</html>

Após a execução do código acima no navegador, ele aparecerá como mostrado abaixo:

Quando você clica na área de desenho, as coordenadas (x e y) na área da imagem em que você clicou também são exibidas no servidor.

Essa é uma explicação do uso de tipos de arquivos de entrada, imagens e atributos de aceitação. Continue visitando este blog para obter as atualizações mais recentes do tutorial de aprendizado de HTML para iniciantes.

</p>