HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLは属性を受け入れます

HTMLのaccept属性は、要素と

要素用です。ただし、HML5はフォームのaccept属性をサポートしていないため、accept属性について説明します。

ユーザーが入力タイプファイルから選択できるファイルのタイプにフィルターを設定する場合は、accept属性を使用します。

以下は構文です-

<input accept="extension|audio/*|video/*|image/*|media_type">

上記のパラメータ-

  • 拡張 ：ユーザーが選択できるファイル拡張子（例：.gif、.jpg、.png、.doc）を指定します
  • オーディオ/* ：ユーザーがすべてのサウンドファイルを選択します
  • ビデオ/* ：ユーザーがすべてのビデオファイルを選択します
  • 画像/* ：ユーザーがすべての画像ファイルを選択します
  • media_type ：image / png、image / tiff、image/bmpなどを含む有効なメディアタイプ。

ここで、accept属性を実装する例を見てみましょう。ここでは、ファイルタイプをimage / png-

としてaccept属性を設定しました。

例

<!DOCTYPE html>
<html>
<body>
<h2>Subject-wise rank</h2>
<form action="">
   <label for="stinfo">Student:</label>
   <input type="text" id ="stinfo"><br>
   <label for="sub">Subject:</label>
   <input type="text"><br>
   <label for="rank">Rank:</label>
   <input type="number"><br>
   <label for="marks">Marks:</label>
   <input type="number"><br><br>
   <label for="result">Upload Result Sheet</label><br>
   <input type="file" name="img" accept="image/png"><br><br>
   <input type="submit">
</form>
</body>
</html>

出力

HTMLは属性を受け入れます

上記の[ファイルを選択]をクリックすると 」を使用して結果シートをアップロードすると、上記で「image / png」を設定したため、ファイルタイプ「png」のみが表示されます-

HTMLは属性を受け入れます


  1. HTMLリスト属性

    HTMLリスト属性は、HTMLドキュメントの要素の事前定義されたオプションを含む要素を参照します。 構文 以下は構文です- <input list=”text”> HTMLリスト属性の例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;       background-colo

  2. HTMLmaxlength属性

    HTML maxlength属性は、HTMLドキュメントの入力HTML要素で許可される最大文字数を定義します。 構文 以下は構文です- <input maxlength=”text”> HTMLmaxlength属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;