kuruton_ternのブログ

プログラミングのアウトプットブログ。

input要素のnameとvalueの違い。submit属性:ボタンの大きさがかわらない!

htmlで入力フォームを作るときわからなかったことを書いておこうと思います。

 

 

input要素

 

name 属性:部品の名前。サーバーに送られたとき、ラベルの役割をする。

value 属性:部品の初期値。valueに値を入れておくと、それが最初から入力されている。

nameはほぼ必須。なくても画面上は問題ないけど入れておかないとフォームからサーバーに送信されるデータに含まれなくなる。

valueは省略しても良い。ちなみに入れると、こうなる。

f:id:kuruton_tern:20190104012221p:plain

valueに値を入れたコード

f:id:kuruton_tern:20190104012329p:plain

valueに値を入れた入力フォーム

一回valueに入力した値を消してから入れなきゃいけない。(valueが初期値だから)

 

だけど入力フォームに「何を入力してほしいか」を入れておきたいときもあるよね?

 

valueに値を入れずに、入力フォームにうっすら文字を表示させる「placeholder」を使えば、入力されている初期値を消す手間なくスムーズに入力できる。

f:id:kuruton_tern:20190104013351p:plain

参考にした記事

inputタグとは|コーディングのプロが作るHTMLタグ辞典

 

 

 

・submit属性で作った送信ボタンの大きさが変わらない。

 

submitって「提出」という意味。

送信ボタンになるやつ。

送信ボタンの大きさを変えるとき

border: none;

をつけずに作って、

padding:30px;

でボタンの幅を大きくしようと思ったんですよ。

そしたら全然幅が大きくならない。

フォントサイズも変えてみましたが大きくならない。

 

理由は

border: none;

 をつけずに作ったので送信ボタンの周りの線がpaddingを許さなかった、ということが考えられます。

すっごい勉強になる失敗でした!