Contents
input要素とは
input要素については過去記事で解説しているので、下記の記事リンクからお読みください。
[blogcard url=”https://chillblog.org/2022/06/10/input%e8%a6%81%e7%b4%a0%e3%82%92%e4%bd%bf%e3%81%84%e3%81%93%e3%81%aa%e3%81%9d%e3%81%86%e3%80%90%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e5%81%8f%e3%80%91/”]inputと組み合わせ可能な属性
maxlength属性
maxlength属性は最大の入力文字数を制限できます。
type属性がtext、email、tel、url、password、searchの時に使用できます。
<input type="password" maxlength="5">minlength属性
minlengthは最小の入力文字数を制限できます。
type属性がtext、email、tel、url、password、searchの時に使用できます。
この属性を設定しておくと送信ボタンを押した時にエラーが表示されます。
<input type="password" minlength="5">placeholder属性
placeholder属性は任意の入力内容のサンプルを表示することができます。
<input type="text" placeholder="入力してください">pattern属性
pattern属性を使うことで入力内容を正規表現に基づいて制限することができます。
下記のコードでは「●●●-●●●●」の半角数字の形式以外ではボタンを押した時にエラーが表示されます。
<input type="text" pattern="\d{3}-\d{4}">list属性
list属性はdatalistタグと組み合わせて自由な入力候補を表示させることができます。
<input type="search" list="list">
<datalist id="list">
<option value="リスト1">
<option value="リスト2">
<option value="リスト3">
</datalist>
<input type="submit">step属性
step属性を使うことでnumberやrangeで数値を刻むことができます。
下記のコードでは数値を20刻みで表示しています
<input type="range" step="20" min="0" max="100">multiple属性
multiple属性を使うことで複数の項目を選択できます。
複数のファイルを選択することができます。
<input multiple="multiple" type="file">accept属性
accept属性はfileでアップロードできるファイルの種類を指定できます。
「image/拡張子」という形式で記述します。
<input type="file" accept="image/png, image/jpeg">readonly属性
readonly属性はデータを送信したいけどユーザーに内容を変更されたくない時に使用します。
このフォームは変更を加えることができません。
<input readonly type="text">disable属性
disable属性を付与することでinputの操作を完全に無効化します。
送信ボタンを押した際にデータの送信も行われないので、データの送信もセットで行いたい場合はhiddenと組み合わせて送りたい内容をvalueに記述します。
<input disabled type="text" value="inputの無効化">
