カテゴリー: input

カテゴリー
button HTML5 input

input type=”button”とは？-HTML

（例）input type=”button”の使用方法

See the Pen
input by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
  <input type="hidden" value="test" name="hidden">
  <p>url:<input type="url" name="url"></p>
  <p>tel:<input type="tel" name="tel"></p>
  <p>serch:<input type="search" name="search"></p>
  <p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
  <p>file:<input type="file" name="file"></p>
  <p>color:<input type="color" name="color"></p>
  <p>range:<input type="range" name="range"></p>
  <p>number:<input type="number" name="number"></p>
  <p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
  <p>time:<input type="time" name="time"></p>
  <p>week:<input type="week" name="week"></p>
  <p>month:<input type="month" name="month"></p>
  <p>date:<input type="date" name="date"></p>
  <p>datetime:<input type="datetime" name="datetime"></p>
  <p>password:<input type="password" name="password"></p>
  <p>email:<input type="email" name="email"></p>
  <p>ボタン:<input type="button" name="button" value="ボタン"></p>
  
</form>

input type=”button”とは？-HTML

　input type=”button”は、特に機能がないボタンを作成するタグです。
　value属性でボタンに表示される名称を指定します。
　通常、javascriptと併用して使用されることが多いタグです。

カテゴリー
HTML5 image input

input type=”image”とは？-HTML

（例）input type=”image”の使用方法

See the Pen
input by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
  <input type="hidden" value="test" name="hidden">
  <p>url:<input type="url" name="url"></p>
  <p>tel:<input type="tel" name="tel"></p>
  <p>serch:<input type="search" name="search"></p>
  <p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
  <p>file:<input type="file" name="file"></p>
  <p>color:<input type="color" name="color"></p>
  <p>range:<input type="range" name="range"></p>
  <p>number:<input type="number" name="number"></p>
  <p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
  <p>time:<input type="time" name="time"></p>
  <p>week:<input type="week" name="week"></p>
  <p>month:<input type="month" name="month"></p>
  <p>date:<input type="date" name="date"></p>
  <p>datetime:<input type="datetime" name="datetime"></p>
  <p>password:<input type="password" name="password"></p>
  <p>email:<input type="email" name="email"></p>
  <p>ボタン:<input type="button" name="button" value="ボタン"></p>
  
</form>

input type=”image”とは？-HTML

　input type=”image”は、画像のボタンを作成するタグです。
　imgタグと同様にsrc属性でURLを指定し、altタグで代替テキストを指定する必要があります。

カテゴリー
HTML5 input submit

input type=”submit”とは？-HTML

（例）input type=”submit”の使用方法

See the Pen
form by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
<p><label>氏名：<input type="text" name="name" size="20"></label></p>
<p><label>血液型：
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男性</label></p>
<p><label><input type="radio" name="sex" value="female">女性</label></p>
</fieldset>
<fieldset>
<legend>習慣</legend>
<p><label><input type="checkbox" name="hobby" value="tre">筋トレ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>その他：<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>

input type=”submit”とは？-HTML

　input type=”submit”は、フォームの送信ボタンを作成するタグです。
　value属性で送信ボタンに表示される名称を指定します。

カテゴリー
file HTML5 input

input type=”file”とは？-HTML

（例）input type=”file”の使用方法

See the Pen
input by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
  <input type="hidden" value="test" name="hidden">
  <p>url:<input type="url" name="url"></p>
  <p>tel:<input type="tel" name="tel"></p>
  <p>serch:<input type="search" name="search"></p>
  <p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
  <p>file:<input type="file" name="file"></p>
  <p>color:<input type="color" name="color"></p>
  <p>range:<input type="range" name="range"></p>
  <p>number:<input type="number" name="number"></p>
  <p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
  <p>time:<input type="time" name="time"></p>
  <p>week:<input type="week" name="week"></p>
  <p>month:<input type="month" name="month"></p>
  <p>date:<input type="date" name="date"></p>
  <p>datetime:<input type="datetime" name="datetime"></p>
  <p>password:<input type="password" name="password"></p>
  <p>email:<input type="email" name="email"></p>
  <p>ボタン:<input type="button" name="button" value="ボタン"></p>
  
</form>

input type=”file”とは？-HTML

　input type=”file”は、ファイルを選択・取得できるフォームを作成するタグです。
　input type=”file”を使用した場合、formタグではmethod属性を「post」、enctype属性を「multipart/form-data」を指定しなければファイルの送信は出来ません。

カテゴリー
HTML5 input radio

input type=”radio”とは？-HTML

（例）input type=”radio”の使用方法

See the Pen
form by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
<p><label>氏名：<input type="text" name="name" size="20"></label></p>
<p><label>血液型：
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男性</label></p>
<p><label><input type="radio" name="sex" value="female">女性</label></p>
</fieldset>
<fieldset>
<legend>習慣</legend>
<p><label><input type="checkbox" name="hobby" value="tre">筋トレ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>その他：<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>

input type=”radio”とは？-HTML

　input type=”radio”は、ラジオボタンのフォームを作成するタグです。
　ラジオボタンとは、用意された選択肢の中から１つだけ選択できるボタンです。

　name属性は全ラジオボタン同じ値にしてください。
　checked属性を指定すると初めから選択済みのラジオボタンを設定可能です。
　value属性は各ラジオボタンそれぞれ分けて設定してください。

カテゴリー
checkbox HTML5 input

input type=”checkbox”とは？-HTML

（例）input type=”checkbox”の使用方法

See the Pen
form by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
<p><label>氏名：<input type="text" name="name" size="20"></label></p>
<p><label>血液型：
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男性</label></p>
<p><label><input type="radio" name="sex" value="female">女性</label></p>
</fieldset>
<fieldset>
<legend>習慣</legend>
<p><label><input type="checkbox" name="hobby" value="tre">筋トレ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>その他：<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>

input type=”checkbox”とは？-HTML

　input type=”checkbox”は、チェックボックスのフォームを作成するタグです。
　チェックボックスは複数のリスト（選択肢）から選択するフォームです。

　name属性はformデータをサーバー側へ送信した際に必要なため指定してください。
　value属性で値を入力してください。value属性を未指定では、送信する値がないことになります。
　初めから何か選択した状態にしたい場合は、checked属性で指定してください。

カテゴリー
color HTML5 input

input type=”color”とは？-HTML

（例）input type=”color”の使用方法

See the Pen
input by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
  <input type="hidden" value="test" name="hidden">
  <p>url:<input type="url" name="url"></p>
  <p>tel:<input type="tel" name="tel"></p>
  <p>serch:<input type="search" name="search"></p>
  <p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
  <p>file:<input type="file" name="file"></p>
  <p>color:<input type="color" name="color"></p>
  <p>range:<input type="range" name="range"></p>
  <p>number:<input type="number" name="number"></p>
  <p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
  <p>time:<input type="time" name="time"></p>
  <p>week:<input type="week" name="week"></p>
  <p>month:<input type="month" name="month"></p>
  <p>date:<input type="date" name="date"></p>
  <p>datetime:<input type="datetime" name="datetime"></p>
  <p>password:<input type="password" name="password"></p>
  <p>email:<input type="email" name="email"></p>
  <p>ボタン:<input type="button" name="button" value="ボタン"></p>
  
</form>

input type=”color”とは？-HTML

　input type=”color”は、色の入力欄フォームを作成するタグです。
　name属性はformデータをサーバー側へ送信した際に必要なため指定してください。

カテゴリー
HTML5 input range

input type=”range”とは？-HTML

（例）input type=”range”の使用方法

See the Pen
input by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
  <input type="hidden" value="test" name="hidden">
  <p>url:<input type="url" name="url"></p>
  <p>tel:<input type="tel" name="tel"></p>
  <p>serch:<input type="search" name="search"></p>
  <p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
  <p>file:<input type="file" name="file"></p>
  <p>color:<input type="color" name="color"></p>
  <p>range:<input type="range" name="range"></p>
  <p>number:<input type="number" name="number"></p>
  <p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
  <p>time:<input type="time" name="time"></p>
  <p>week:<input type="week" name="week"></p>
  <p>month:<input type="month" name="month"></p>
  <p>date:<input type="date" name="date"></p>
  <p>datetime:<input type="datetime" name="datetime"></p>
  <p>password:<input type="password" name="password"></p>
  <p>email:<input type="email" name="email"></p>
  <p>ボタン:<input type="button" name="button" value="ボタン"></p>
  
</form>

input type=”range”とは？-HTML

　input type=”range”は、レンジの入力欄フォームを作成するタグです。
　レンジの初期値は１〜１００となっており、max属性とmin属性によって調整可能です。レンジの変動幅もstep属性によって自由に可変できます。
name属性はformデータをサーバー側へ送信した際に必要なため指定してください。

カテゴリー
HTML5 input number

input type=”number”とは？-HTML

（例）input type=”number”の使用方法

See the Pen
input by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
  <input type="hidden" value="test" name="hidden">
  <p>url:<input type="url" name="url"></p>
  <p>tel:<input type="tel" name="tel"></p>
  <p>serch:<input type="search" name="search"></p>
  <p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
  <p>file:<input type="file" name="file"></p>
  <p>color:<input type="color" name="color"></p>
  <p>range:<input type="range" name="range"></p>
  <p>number:<input type="number" name="number"></p>
  <p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
  <p>time:<input type="time" name="time"></p>
  <p>week:<input type="week" name="week"></p>
  <p>month:<input type="month" name="month"></p>
  <p>date:<input type="date" name="date"></p>
  <p>datetime:<input type="datetime" name="datetime"></p>
  <p>password:<input type="password" name="password"></p>
  <p>email:<input type="email" name="email"></p>
  <p>ボタン:<input type="button" name="button" value="ボタン"></p>
  
</form>

input type=”number”とは？-HTML

　input type=”number”は、数値の入力欄フォームを作成するタグです。

　name属性はformデータをサーバー側へ送信した際に必要なため指定してください。size属性により入力欄の表示サイズを指定できますが、CSSでも調整できるため必須ではありません。maxlength属性は入力できる最大文字数を指定することが可能です。

カテゴリー
datetime-local HTML5 input

input type=”datetime-local”とは？-HTML

（例）input type=”datetime-local”の使用方法

See the Pen
input by linlin (@linlin098765)
on CodePen. 

<form action="◯◯.php" method="post">
  <input type="hidden" value="test" name="hidden">
  <p>url:<input type="url" name="url"></p>
  <p>tel:<input type="tel" name="tel"></p>
  <p>serch:<input type="search" name="search"></p>
  <p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
  <p>file:<input type="file" name="file"></p>
  <p>color:<input type="color" name="color"></p>
  <p>range:<input type="range" name="range"></p>
  <p>number:<input type="number" name="number"></p>
  <p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
  <p>time:<input type="time" name="time"></p>
  <p>week:<input type="week" name="week"></p>
  <p>month:<input type="month" name="month"></p>
  <p>date:<input type="date" name="date"></p>
  <p>datetime:<input type="datetime" name="datetime"></p>
  <p>password:<input type="password" name="password"></p>
  <p>email:<input type="email" name="email"></p>
  <p>ボタン:<input type="button" name="button" value="ボタン"></p>
  
</form>

input type=”datetime-local”とは？-HTML

　input type=”datetime-local”は、協定世界時間ではなくローカル日時の入力が可能です。

　name属性はformデータをサーバー側へ送信した際に必要なため指定してください。size属性により入力欄の表示サイズを指定できますが、CSSでも調整できるため必須ではありません。maxlength属性は入力できる最大文字数を指定することが可能です。