SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】type属性resetの使い方、入力内容のリセットボタンを作成しよう!

SHU[シュウ]

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

シュウ
シュウ
今回は【HTML】type属性resetの使い方、入力内容のリセットボタンを作成しよう!
の解説になります!

こんな方に読んでほしい

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

今回は、input type="reset"について詳しく解説していきます。
type=”reset”では、「入力内容のリセットボタン」が作成できます。

input type="reset"で作成すると、入力内容のリセットボタンが作成されます。

textとresetを比較

左の図が、input type="text"になり、通常の入力欄になります。
右の図が、input type="reset"になり、入力内容のリセットボタンになります。

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

type=”reset”について

type=resetについて

input type="reset"を指定すると、入力内容のリセットボタンを作成できます。
入力したデータが全て「リセット」になります。
書き方は以下のようになります。

input type=”reset”


<form method="post" action="URL">
	<div>
		<label for="fullname">お名前</label>
		<input type="text" name="fullname" />
	</div>
	<input type="reset" value="内容をリセットする" />
</form>

value属性(ボタン名)について

value属性について

value属性とは、resetの「ボタン名」になります。
お問い合わせ内容を「内容をリセットする」、「内容をクリアする」、「リセットする」などのボタン名が使われます。
また、type属性が「image」、「submit」、「button」の場合はボタン名として表示されます。

value属性について


<form method="post" action="URL">
	<div>
		<label for="fullname">お名前</label>
		<input type="text" name="fullname" />
	</div>
	<input type="submit" value="送信する" /> <input type="reset" value="リセットする" />
</form>

ポイント!
type="reset"のみ設置した場合は、「送信する」為のボタンがないため、
必ず、type="submit"も合わせて設置しておきましょう!!

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

CSSでinput type=resetを整える

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

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

属性セレクタの使用例



<form method="post">
	<div>
		<label for="fullname">お名前</label>
		<input type="text" name="fullname" />
	</div>
	<input type="submit" value="送信する" /> <input type="reset" value="リセットする" />
</form>
/*--共通--*/
input[type="submit"],
input[type="reset"]{
	width: 20%;
    font-size: 15px;
    color: #fff;
	display: inline-block;
    padding: 15px 0px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 1s;
}

/*--「送信する」ボタン色・ボーダー色--*/
input[type="submit"] {
	background-color: #5c87a6;
    border: 1px solid #5c87a6;
}

/*--「リセットする」ボタン色・ボーダー色--*/
input[type="reset"] {
	background-color: #fd6158;
    border: 1px solid #fd6158;
}

/*--共通--*/
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s;
}

/*--「送信する」ボタン色・ボーダー色 :hover時--*/
input[type="submit"]:hover {
    color: #5c87a6;
    border: 1px solid #5c87a6;
}

/*--「リセットする」ボタン色・ボーダー色 :hover時--*/
input[type="reset"]:hover {
    color: #fd6158;
    border: 1px solid #fd6158;
}

今回は、:hoverした際に、「背景色、文字色」が変わるようになっております。

ユーザーが「送信する」、「リセットする」ボタンを間違わないように、背景色やボーダー色、文字色を変えることで、入力した内容を間違ってリセットすることがないように一工夫入れておきましょう!!

関連記事

type=”text”【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!
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の使い方、フォームの送信ボタンを作成しよう!

まとめ

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

POINT
  • input type="reset"は、 入力内容のリセットボタンを作成します。
  • value属性とは、resetの「ボタン名」になります。
  • 「送信する」、「リセットボタン」はセットで使うようにしましょう。
  • 「送信する」、「リセットボタン」はユーザーが間違わないように、背景色やボーダー色、文字色で一工夫入れましょう。
  • CSSでスタイルを整える際には、「属性セレクタ、クラス名、id名」を使っても問題ありません。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

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

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top