SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【HTML】type属性 textの使い方、1行のテキスト入力欄を作成しよう!
の解説になります!

こんな方に読んでほしい

  • HTMLを学び始めた方へ
  • HTMLについて学びたい方へ
  • 今回はinput type=”text”について解説しております。

前回は、よく使うformタグ、「1行の入力欄」、「ラジオボタン」、「チェックボックス」などの使い方について
解説しました。
「簡単なフォームを作ってみよう!!」解説記事はコチラから

今回は、input type="text"について詳しく解説していきます。
type=”text”では、「入力の初期値」「入力例」「文字数制限」など様々な指定ができるようになります。

type=”text”について

textについて

input type="text"を指定すると、1行のテキスト入力欄になります。
書き方は以下のようになります。

input type=”text”


<form method="post" action="URL">
	<div>
		<label for="fullname">お名前</label>
		<input type="text" name="fullname" />
	</div>
</form>

name属性について

name属性とは、入力コントロールに名前を指定し、データとともに送信します。
例といて、name="fullname"を指定し、入力欄に「山田 太郎」と入力し送信した場合は、
「fullnameは山田 太郎です」とデータになり送信されます

value属性(入力欄に初期値)について

value属性とは、入力欄に初期値の文字を指定します。
また、type属性が「submit」、「image」、「reset」、「button」の場合はボタン名として表示されます。

value属性について



<form method="post" action="URL">
<div>
	<label for="fullname">お名前</label>
	<input type="text" name="fullname" value="山田 太郎" />
</div>
	
<div>
	<label for="ruby">フリガナ</label>
	<input type="text" name="ruby" value="ヤマダ タロウ" />
</div>
</form>

placeholder属性(入力欄に薄く表示)について

placeholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。
placeholderで指定した文字や値は入力する際に、消えますので問題はありません。

placeholder属性について


<form method="post" action="URL">
<div>
	<label for="fullname">お名前</label>
	<input type="text" name="fullname" placeholder="例) 山田 太郎" />
</div>
</form>

required属性(必須項目)について

required属性のエラー

required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。

required属性について


<form method="post" action="URL">
<div>
	<label for="fullname">お名前</label>
	<input type="text" name="fullname" placeholder="例) 山田 太郎" required />
</div>
<input type="submit" value="チェック" />
</form>

注意!
※ブラウザがサポート対応していない場合は必須項目は無視されるので注意が必要です。
そのような場合はJavaScriptを使いバリデーション(必須項目)の設定をおこないましょう。

maxlength属性(文字数の最大値)について

maxlength属性のエラー

maxlength属性とは、文字数の最大値を指定します。
maxlength="4"と指定すると、4文字を超えることはありません。

maxlength属性について


<form method="post" action="URL">
<div>
	<label for="keyword">キーワード</label>
	<input type="text" name="keyword" placeholder="4文字まで"  maxlength="4" />
</div>
</form>

注意!
パスワードなど重要な入力欄では、文字が伏字になり、文字数が確認できなくなるため、
使用するのは避けましょう。

また、電話番号のハイフン(-)や空白も文字数とカウントするため、使用する場合は固定の4文字程度の場合に使用しましょう。
例)「090-1234-5678」と入力したつもりが「090-1234-56」、
例)「山田 太郎」と入力したつもりが「山田 太」になったりします。

minlength属性(文字数の最小値)について

minlength入力時にエラー

minlength属性とは、文字数の最小値を指定します。
minlength="3"と指定すると、3文字以上入力しないとエラーが表示されます。

minlength属性について


<form method="post" action="URL">
<div>
	<label for="keyword">キーワード</label>
	<input type="text" name="keyword" placeholder="3文字以上"  minlength="3" required />
</div>
<input type="submit" value="チェック" />
</form>

注意!
今回は、3文字以上に指定をしましたが、空白も1文字としてカウントするため、ユーザーが空白に気づかず送信してしまう恐れがあります。
使用する場合は「required(必須項目)」
と合わせて指定しましょう。

spellcheck属性(スペルチェック)について

spellcheck属性のエラー

spellcheck属性とは、スペル・文法のチェックをおこないます、チェックミスがみつかった場合は警告線が引かれます。
true 「スペルチェックあり」、false 「スペルチェックなし」の状態になります。

spellcheck属性について



<form method="post" action="URL">
<div>
	<label for="spellcheck">spellcheckあり</label>
	<input type="text" placeholder="spellcheckあり" spellcheck="true" />
</div>

<div>
	<label for="spellcheck">spellcheckなし</label>
	<input type="text" placeholder="spellcheckなし" spellcheck="false" />
</div>
</form>

注意!
フィールド内の日本語は未対応になります。アルファベットのみ対応になります。

size属性(入力欄の幅)について

size属性の表

size属性とは、入力欄の幅を指定します。
0より大きい数値を指定します。デフォル値は20になります。

size属性について




<form method="post" action="URL">
<div>
	<label for="size">size5</label>
	<input type="text" name="size" placeholder="size5" size="5" />
</div>

<div>
	<label for="size">size10</label>
	<input type="text" name="size" placeholder="size10" size="10" />
</div>

<div>
	<label for="size">size30</label>
	<input type="text" name="size" placeholder="size30" size="30" />
</div>
</form>

CSSでinput type=”text”を整える

CSSでinputを整える

上記で「size」での幅を指定しましたが、余白ボーダー等は指定できません。
そのような場合はCSSでスタイルを整えていきます。

CSSの「属性セレクタ」を使い整えていきます。
書き方は以下のようになります

input[type="text"] {
  /*--type="text"のinput要素にのみ適用されます--*/
}

属性セレクタの使用例



<form method="post" action="URL">
<div>
	<label for="size">テキスト</label>
	<input type="text" name="text" />
</div>

<div>
	<label for="size">テキスト</label>
	<input type="text" name="text" />
</div>
</form>
input[type="text"] {
  width: 200px; /*--幅--*/
  padding: 10px; /*--余白--*/
  font-size: 16px; /*--文字サイズ--*/
  border: solid 2px #cccccc; /*--ボーダー線--*/
  border-radius: 5px; /*--角丸--*/
}

/*--focus--*/
input[type="text"]:focus {
  background-color: #febe3e; /*--背景色--*/
}

:focusとは、テキストフィールドなどのフォーム部品がフォーカス状態になったときに、
スタイルが適用されます。
今回は、「背景色」が変わるようになっております。

関連記事

type=”tel”【HTML】type属性telの使い方、電話番号の入力欄を作成しよう!
type=”email”【HTML】type属性emailの使い方、メールアドレスの入力欄を作成しよう!
type=”url”【HTML】type属性urlの使い方、URLの入力欄を作成しよう!
type=”password”【HTML】type属性passwordの使い方、パスワードの入力欄を作成しよう!
type=”date”【HTML】type属性dateの使い方、日付の入力欄を作成しよう!
type=”month”【HTML】type属性monthの使い方、月の入力欄を作成しよう!
type=”week”【HTML】type属性weekの使い方、週の入力欄を作成しよう!
type=”time”【HTML】type属性timeの使い方、時刻の入力欄を作成しよう!
type=”number”【HTML】type属性numberの使い方、数値の入力欄を作成しよう!
type=”range”【HTML】type属性rangeの使い方、スライダー(数値)を作成しよう!!
type=”color”【HTML】type属性colorの使い方、RGBカラーの入力欄を作成しよう!
type=”checkbox”【HTML】type属性checkboxの使い方、チェックボックスを作成しよう!
type=”radio”【HTML】type属性radioの使い方、ラジオボタンを作成しよう!
type=”file”【HTML】type属性fileの使い方、送信するファイルの選択欄を作成しよう!
type=”submit”【HTML】type属性submitの使い方、フォームの送信ボタンを作成しよう!
type=”reset”【HTML】type属性resetの使い方、入力内容のリセットボタンを作成しよう!

まとめ

今回はこれで以上です。
次回も「フォーム」について解説していきます。

POINT
  • name属性とは、入力コントロールに名前を指定し、データとともに送信します。
  • value属性とは、入力欄に初期値の文字を指定します。
  • placeholder属性とは、入力欄に文字や値を薄く表示します。
  • required属性とは、必須項目に設定します。
  • maxlength属性とは、文字数の最大値を指定します。
  • minlength属性とは、文字数の最小値を指定します。
  • spellcheck属性とは、スペル・文法のチェックをおこないます。
  • size属性とは、入力欄の幅を指定します。
  • CSSでスタイルを整える際には、「属性セレクタ、クラス名、id名」を使っても問題ありません。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top