WEBデザイン　陽炎稲妻水の月

初心者がwebデザインについて勉強しています。

【php】フォーム処理2

php form input

input typeの種類

typeの種類は複数ありますが、今回は「type="text"」「type="password"」「type="radio"」「type="checkbox"」を試してみます。

  • name属性について

    同一の「name」で複数のinput typeを複製した場合、配列の何番目に格納するか記載する。

    （例）name="name[0]"の場合、「０」番目に格納

  • 「type="password"」について

    フォームでの入力時には、ブラウザ上で見えないようにマスキングがかかる。

  • 「type="radio"」「type="checkbox"」について

    文字部分をクリックしてもチェックが入るようにするには、「label」タグでくくる。


【送信側】

ファイル名「index.php」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>input typeの種類</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<h1>お問い合わせフォーム</h1>
<p>phpの練習用お問い合わせフォームです。</p>
<div id="contact">
<form action="get.php" method="get">
  <table>
    <tr>
      <th>お名前<span class="req">必須</span></th>
      <td>姓：<input type="text" name="name[0]"><br>名：<input type="text" name="name[1]"></td>
    </tr>
    <tr>
      <th>ご住所<span class="req">必須</span></th>
      <td><input type="text" name="address"></td>
    </tr>
    <tr>
      <th>電話番号<span class="req">必須</span></th>
      <td><input type="text" name="tel"></td>
    </tr>
    <tr>
      <th>メールアドレス<span class="req">必須</span></th>
      <td><input type="text" name="mail"></td>
    </tr>
    <tr>
      <th>パスワード<span class="req">必須</span></th>
      <td><input type="password" name="pw"></td>
    </tr>
    <tr>
      <th>性別</th>
      <td>
        <label><input type="radio" name="sex" value="男">男</label>
        <label><input type="radio" name="sex" value="女">女</label>
      </td>
    </tr>
    <tr>
      <th>職業</th>
      <td>
        <label><input type="checkbox" name="job" value="学生">学生</label>
        <label><input type="checkbox" name="job" value="主婦">主婦</label>
        <label><input type="checkbox" name="job" value="会社員">会社員</label>
        <label><input type="checkbox" name="job" value="その他">その他</label>
      </td>
    </tr>
    <tr>
      <th>お問い合わせの内容<span class="req">必須</span></th>
      <td><textarea name="cont"></textarea></td>
    </tr>
  </table>
<p><input type="submit" value="入力項目を確認する"></p>
</form>
</div><!-- /#contact -->
</div><!-- /#container -->
</body>
</html>


【受信側】

ファイル名「get.php」

<?php 
$name = $_GET[ 'name' ];
$address = $_GET[ 'address' ];
$tel = $_GET[ 'tel' ];
$mail = $_GET[ 'mail' ];
$pw = $_GET[ 'pw' ];
$sex = $_GET[ 'sex' ];
$job = $_GET[ 'job' ];
$cont = $_GET[ 'cont' ];
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>受信側</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<h1>内容の確認</h1>
<p>入力された内容に間違いがないか確認して下さい。</p>
<table>
<tr><th>お名前</th><td>姓：<?php echo $name[0] ?><br>名：<?php echo $name[1] ?></td></tr>
<tr><th>ご住所</th><td><?php echo $address ?></td></tr>
<tr><th>電話番号</th><td><?php echo $tel ?></td></tr>
<tr><th>メールアドレス</th><td><?php echo $mail ?></td></tr>
<tr><th>パスワード</th><td><?php echo $pw ?></td></tr>
<tr><th>性別</th><td><?php echo $sex ?></td></tr>
<tr><th>職業</th><td><?php echo $job ?></td></tr>
<tr><th>お問い合わせ内容</th><td><?php echo $cont ?></td></tr>
</table>
</div><!-- /#container -->
</body>
</html>


【cssファイル】

ファイル名「style.css」（送信側と受信側の共通のcssです）

@charset "UTF-8";

/*reset
-----------------*/
html, body, h1, p, table, tr, th, td, input, textarea {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;  
}

input, textarea {
  border: none;
}

/*layout
-----------------*/
#container {
  width: 600px;
  margin: 50px auto;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  padding: 10px 0 9px 14px;
  border-left: 8px solid #47BE98;
  background: #F6F6F6;
}

h1 + p {
  margin-bottom: 40px;
}

table, th, td {
  border: 1px solid #aaa;
  border-collapse: collapse;
}

table {
  width: 100%;
  margin-bottom: 20px;
}

th {
  width: 40%;
  background: #F6F6F6;
  text-align: left;
  vertical-align: top;
  padding: 20px 16px 20px 16px;
  font-weight: normal;
  overflow: hidden;
  line-height: 1.5;
}

span.req {
  display: inline-block;
  background: #ee6557;
  color: #fff;
  padding: 0 4px;
  float: right;
}

td {
  width: 60%;
  padding: 10px 16px;
  line-height: 1.5;
}

input[type="text"], input[type="password"], textarea {
  border: 1px solid #aaa;
  padding: 4px 10px 3px;
  font-size: 14px;
  box-shadow: inset 0 2px 3px #ddd;
}

tr:first-child input:first-child {
  margin-bottom: 10px;
}

input[type="text"], input[type="password"] {
  width: 80%;
}

input[type="radio"], input[type="checkbox"] {
  vertical-align: 0.1rem;
  margin-right: 4px;
}

label {
  margin-right: 20px;
}

textarea {
  width: 80%;
  height: 100px;
}

input[type="submit"] {
  background: #4FC09C;
  color: #fff;
  padding: 14px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s linear;
}

input[type="submit"]:hover {
  opacity: 0.7;
}


【送信側】

ブラウザでは、以下のように結果が表示されます。

f:id:sandw:20160715054510j:plain


【受信側】

ブラウザでは、以下のように結果が表示されます。

f:id:sandw:20160715054526j:plain