このページについて
このページではHTMLで使えるmaxlengthとminlengthの使い方と機能を解説しています。
maxlength属性
maxlengthはユーザーから入力を受け付ける際に入力できる最大文字数を設定することができる機能を持っています。maxlengthはinputタグ/textareaタグの2つで使う事ができます。
<input type="text" maxlength="5">このように書けば最大文字数を5に制限する事ができ、ユーザーはそれ以上の文字を入力する事ができなくなります。
minlength属性
minlengthはユーザーから入力を受け付ける際に入力できる最小文字数を設定することができる機能を持っています。minlengthはinputタグ/textareaタグで使う事ができます。
<input type="pasword" minlength="8">このように書く事で、最低でも8文字を使ったパスワードを設定してもらうということも可能になります。
maxとminの併用
maxとminを併用し、x文字以上y文字以下という制限を設けることもできます。使用ケースとしてはパスワードの登録とか、コメントの内容とかですね。簡単なサンプルとしては以下のようになります。
<form>
<input type="text" maxlength="10" minlength="3">
<label>ID</label>
<input type="password" maxlength="19" minlength="8">
<label>Password</label>
</form>
<textarea minlength="10" maxlength="30"></textarea>textareaタグに関してはplaceholderタグを使って初期入力をしていたといても、その数値分はカウントされません。
まとめ
maxlentghとminlengthはそれぞれ最大文字数と最小文字数を設定する事ができます。それぞれ設定をうまく使い、ユーザーからの入力を受け付ける事ができるようにしましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。