input[type="text"]{
	width:50%;
	color:#808080;
	vertical-align:60%;
	height:40px;
}
input[type="image"]{
	width:30%;
}

●vertical-align:60%;　のパーセント表示で、送信ボタン画像との高さが揃う。
●height:40px; で入力フォームの高さが大きくなる。

▲このページのTOPに戻る▲

<form action="./check.cgi" method="post" id="mainF" name="mainF">
</form>
method="HTTPメソッド"
①get・・・Action属性で指定されたURLが付加されて送信される
②post・・・そのままデータが送信される
action="URL"
送信されたデータを処理するプログラムのURLを指定する。.cgi
name="名前"
スクリプト言語などから参照することが出来るようにするための名前を指定する。 あとid="名前"も一緒に指定しておく
target="フレーム名"
フォームを送信した結果を表示させるフレーム、またはウィンドウの名前を指定する。
▲このページのTOPに戻る▲

●headに郵便局の住所録を読み込ませる
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>


郵便番号（入力頂くと自動で下に住所が入力されます）<br />
<input type="text" name="郵便番号" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','住所','住所');"><br />
住所（番地・マンション名・部屋番号までご記入ください）<br />
<input type="text" name="住所">
▲このページのTOPに戻る▲

ユーザーがデータの入力や選択、データの送信などを行う為の部品

input type="○○○"

text 1行のテキスト入力フィールド
<input type="text" name="col1" id="col1" size="20"value="*" />
password パスワード入力用フィールド
<input typ="password" name="col2" id="col2" size="20"value="*" />
checkbox チャックボックス（複数選択可）
<input type="checkbox" name="col3" id="col3" value="a1" checked />
radio ラジオボタン（1つのみ選択可）nameはすべて同じにしないと正しく選択されない
<input type="radio" name="col4" value="a2" checked />
date 日付日にち選択
<input type="date" name="お日にち" />
submit 送信ボタン
<input type="submit" value="送信" />
reset リセットボタン
<input type="reset" value="リセット" />
button 汎用ボタン
<input type="button" value="ボタン" />
image src属性で指定した画像による送信ボタン
<input type="image" name="col5" src="buttom.gif" alt="送信" />
name="名前"
この部品の名前を指定。フォームのデータが送信される場合は、この名前とデータが組みになって送信される。
value="値"
textの場合は入力フィールドの初期値、submit reset buttomの場合は、ボタンのラベルとして表示させる文字になる。 checkbox radioの場合は、その項目が選択されている場合に、サーバーに送信される値となるので、入力フォームの一部として利用する場合には必ず指定する。
size=幅"
この部品の幅を指定する。 typeの属性の値がtext passwordの場合は文字数で、それ以外の場合はピクセルで指定する。
maxlength="最大文字数"
type属性の値がtext passwprdの場合の、入力可能な最大文字数を指定します。 デフォルトの場合は入力可能な文字数の制限はありません。
checked="checked"
type属性の値がcheckbox radioの場合に、そのボタンが選択されている状態にします。
disabled="chedisabledcked"
その部品に対して、選択や変更など出来ないようにする。
▲このページのTOPに戻る▲

複数行の入力フィールド

rows="行数"
行数を指定します。入力可能はテキストエリアの行数が制限されるわけではない。
cols="幅"
幅を指定します。入力可能はテキストエリアの幅が制限されるわけではない。
name="名前"
入力フィールドの名前を指定します。フォームのデータが送信される場合は、この名前とデータが組みになって送信されます。
wrap="hard"
ブラウザでも、送信されるデータでも改行される。 off 改行されない。 soft ブラウザでは改行されるけど、送信データは改行されない。

<textarea name="kansou" rows="4" cols="40" wrap="hard">＊＊＊</textarea>

＊＊＊フィールド上の初期値

▲このページのTOPに戻る▲

name="名前"
ボタンの名前を指定します。フォームのデータが送信される場合は、この名前とデータが組みになって送信されます。

type="形式"

submit 送信ボタン
reset リセットボタン
button 凡用ボタン

value="値"
name属性と共にサーバーに送信される値を指定します。


<button type="submit" value="new">
    <img src="○○○.jpg" width="100" height="20" alt="送信" />
</button>
▲このページのTOPに戻る

メニューを作成する要素です。

name="名前"
メニューの名前を指定します。フォームのデータが送信される場合は、この名前とデータが組みになって送信されます。
size="行数"
select要素をリストボックスとして表示する場合の表示行数を指定します。 これを指定すると、プルダウンメニューではなく、リストボックスとして表示されるようになります
multiple
選択肢の中から複数選択できるようにする場合に指定します。
selected
選択肢をあらかじめ選択された状態にする。
value="値"
name属性と共にサーバーに送信される値を指定します。

<select name="age" size="5" multiple>
    <option selected>10代</option>
</select>
▲このページのTOPに戻る
CGIなどで使う。画面上は出ないが、ソースをみると分かる。

<input type="hidden" name="example" value="サンプル" />
▲このページのTOPに戻る

【HTML】
<input type="text" name="sEmail" maxlength="50" value="メールアドレス" onFocus="HideFormGuide(this);" onBlur="ShowFormGuide(this);">
下部にＯＮ／ＯＦＦの切り替えの1JavaScriptを入れる


【CSS】
/*メールフォーム*/
#side input[type="text"]{
	width:50%;
	color:#808080; ※中の文字の色を指定する
	vertical-align:60%;
}
#side input[type="image"]{
	width:30%;
}


【JavaScript】
//フォームのON FF
var GuideSentence = 'メールアドレス';　※フォームのvalueと同じ内容にする
    function ShowFormGuide(obj) {
       // 入力案内を表示
      if( obj.value == '' ) {
          obj.value = GuideSentence;
       }
    }
    function HideFormGuide(obj) {
       // 入力案内を消す
      if( obj.value == GuideSentence ) {
          obj.value='';
       }
    }

DLデータJavaScript

サイドをスクロールさせるデータも入っている。
バグなのか不明だが、<article>で囲ったら締めの</article>を外さないときちんと動作しない。マジでなんでだろう？？？？


【HTML】
<div id="side">

ここに入力した内容が動く

</div>
下部にＯＮ／ＯＦＦの切り替えのJavaScriptを入れる


【CSS　PC用】
#side{
  position: absolute;
  top: 0px;
  left: 820px;
  width: 280px;
  height: 680px;
  background-color:#3a5898;　※背景を指定すると文字が浮き出ない。必須！
  border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;

	background:linear-gradient(#3a5898,#6487d2);
	background:-moz-linear-gradient(top,#3a5898,#6487d2);
	background:-webkit-gradient(linear,left top,left bottom,from(#3a5898),to(#6487d2));
	-pie-background:linear-gradient(#3a5898,#6487d2);
	
	padding-top:10px;
}



【CSS　モバイル用】
#side{
  width:100%;
  height:95px;
  position:fixed;
  right:0px;
  bottom:0px;
  background-color:#3a5898;
  opacity:0.9;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
#side img{
	opacity:1!important;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100)!important;
	width:280px;
	margin:0 auto;
}
  
#side p{
  margin:0;
  padding:0;
  text-align:center;
  background:#434343;
}