HTMLのaccept属性とは？ファイル選択のフィルタリング方法を解説
HTMLのaccept属性は、<input>要素および<form>要素で使用できる属性です。ただし、HTML5では<form>要素のaccept属性はサポートされていないため、この記事では<input>要素のaccept属性について詳しく解説します。
accept属性を使うと、<input type="file">でユーザーが選択できるファイルの種類にフィルターをかけることができます。特定の拡張子やファイル形式だけをアップロード対象にしたい場合に非常に便利です。
基本構文
<input accept="拡張子|audio/*|video/*|image/*|メディアタイプ">
各パラメータの意味は以下の通りです。
- 拡張子： ユーザーが選択できるファイルの拡張子（例： .gif、.jpg、.png、.doc）を指定します
- audio/*： すべての音声ファイルを選択可能にします
- video/*： すべての動画ファイルを選択可能にします
- image/*： すべての画像ファイルを選択可能にします
- media_type： image/png、image/tiff、image/bmpなどの有効なMIMEタイプ（メディアタイプ）を指定します
それでは、accept属性を実装した具体例を見ていきましょう。以下のサンプルでは、accept属性に「image/png」を指定しています。
コード例
<!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>
表示結果
上記のコードでは、成績表をアップロードする際に「Choose File」ボタンをクリックすると、accept属性に「image/png」を設定しているため、ファイル選択ダイアログにはPNG形式のファイルのみが表示されます。
-
HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法
HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&
-
HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説
maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属