同棲カップルの日常

現役システムエンジニアと現役調理師によるおすすめ商品紹介

ひっそりと注目されているHTML入門⑦~inputタグの即テク~テキストボックス編

おはこんにちばんは

どうも、旦那のまことです

 

このブログは1人でも多くの人に

プログラミングの楽しさを

知ってもらうために書いています

 

ITの学校なんて行ってない

ITの知識なんて何にも知らない

って人でも全然大丈夫です!!!

 

僕もITの学校なんて行ってないですし

知識0からでも

システムエンジニアとして

働けています!

 

ちなみに僕は県内で偏差値が

1番低い高校出身で、前は肉体労働の

仕事をしていました!

 

IT、プログラミングに少しでも

興味のある方、僕と一緒に

少しずつ勉強していきましょう!

 

一気に沢山の事を教えてしまうと

頭の中でごちゃごちゃになったり

覚えきれないので、基本的には

1つのブログで1つの事を

教えていきたいと思います

 

テキストを表示する電源を入れたコンピューターモニター

 

第1回目のブログで書いた

HTMLの基本的な構文を

見てない方は見てください

 

下のリンクを押せば

第1回目のブログが見れます

ひっそりと注目されているHTML入門①~基本構文について~

 

htmlファイルの作り方が

わからない方は

下記のブログを見てください

ひっそりと注目されているHTML入門②~pタグの即テク~

 

ではタイトルに書いてある通り

今回はinputタグについて

学んでいきたいと思います

 

inputタグはどのような時に

使うタグなのかと言いますと

入力項目を設置したい時に

使うタグです

 

入力項目といっても様々なものが

ありますが、今回は

テキストボックス

について実践していきます

 

テキストボックスとはどういう

ものかと言いますと、

例えば会員登録をするサイトが

ありますよね?

その他にも検索するのに文字を

入力する長方形の箱です

 

適当に検索して出てきたサイトに

あったものですが、

テキストボックスとは

これのことです

 

f:id:makoxti:20210303215451p:plain

 

そして、薄く「メールアドレス」と

書かれています

この薄く書かれた文字のことを

プレースホルダ

といいます

 

それではまず最初に「input」タグの

使い方を解説していきます

 

基本的な構文としては下記になります

<input type="○○">

 

○○の部分には入力項目のタイプを

設定します

タイプで使える一覧を

載せておきますので、

是非色々試してみてください

 

それでは早速文字を入力する

テキストボックスについて

実践していきます

 

文字を入力する時は、

typeにtextと指定します

<input type="text">

 

ではこちらをブラウザで

表示させてみましょう

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<input type="text">
</body>
</html>

 

f:id:makoxti:20210303221250p:plain

 

次に、文字が入力できるか

試してみましょう

f:id:makoxti:20210303221343p:plain

 

 

ちゃんと文字の入力ができました!

 

ついでに、text意外によく使う

radiocheckbox

みてみましょう

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<input type="text">
<input type="radio">
<input type="checkbox">
</body>
</html>

 

ではこちらのプログラムを

ブラウザで表示させてみましょう

f:id:makoxti:20210303221948p:plain

 

○と□が表示されました

これが、ラジオボタン

チェックボックスです

 

実際にボタンをクリックしてみると

わかるのですが、

ラジオボタンは1回押下すると

チェックを外せません

 

それに対し、チェックボックス

チェックを外せます

 

ラジオボタンを1つだけで使うことは

まずあり得ませんが、使い方の

用途としては

選択肢があって

絶対に入力してほしい

場合に使います

例えばこんな感じです

f:id:makoxti:20210303222520p:plain

 

そしてチェックボックス

任意のアンケートのような

ものに使います

なぜなら、チェックを外せるからです

例えばこんな感じです

f:id:makoxti:20210303222845p:plain

 

写真のプログラム載せておきますね

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<input type="text">
<div>
    <label>性別</label>
    <input type="radio">男性
    <input type="radio">女性
</div>
<div>
    <label>接客態度に満足ですか:</label>
    <input type="checkbox">はい
</div>
</body>
</html>

 

 

では最後に、プレースホルダ

の使い方をご紹介します

使い方はめちゃくちゃ簡単です

 

placeholder="〇〇"を

足してあげるだけで使えます

例えばこんな感じです

<input type="text" placeholder="名前を入力">

 

これをブラウザで表示させてみましょう

f:id:makoxti:20210303223223p:plain

 

ちゃんと名前を入力と

表示されていますね!

 

それでは最後にタイプ一覧を

載せておきますね!

---------------------------------------

◆タイプ一覧

type="hidden"
画面上は表示されない隠しデータを指定する

type="text"
一行テキストボックスを作成する(初期値)

type="search"
検索テキストの入力欄を作成する

type="tel"
電話番号の入力欄を作成する

type="url"
URLの入力欄を作成する

type="email"
メールアドレスの入力欄を作成する

type="password"
パスワード入力欄を作成する

type="datetime"
UTC協定世界時)による日時の入力欄を作成する

type="date"
日付の入力欄を作成する

type="month"
月の入力欄を作成する

type="week"
週の入力欄を作成する

type="time"
時間の入力欄を作成する

type="datetime-local"
UTC協定世界時)によらないローカル日時の入力欄を作成する

type="number"
数値の入力欄を作成する

type="range"
レンジの入力欄を作成する

type="color"
色の入力欄を作成する

type="checkbox"
チェックボックスを作成する

type="radio"
ラジオボタンを作成する

type="file"
サーバーへファイルを送信する

type="submit"
送信ボタンを作成する

type="image"
画像ボタンを作成する

type="reset"
リセットボタンを作成する

type="button"
汎用ボタンを作成する

---------------------------------------

 

いかがだったでしょうか?

少しでも「面白い」と思って

貰えたら嬉しいです

 

こちらのブログでは僕が

プログラミングを勉強する方法

について特別大公開しているので

よければ見てください

【大公開】元肉体労働者の僕がシステムエンジニアになるための勉強方法を特別に大公開します

 

子供をお持ちの親御さんであれば

是非こちらのブログも

読んでみてください

今すぐにやるべき!子供に学ばせるべき習い事とは!?

 

どちらもFさん家の日常ブログと

表示されていますが、表示される

ブログの内容はそれぞれ違います

 

ここまでお読みいただき

ありがとうございました!

 

それでは次のブログでお会いしましょう!