- 更新日: 2019年6月24日
- 公開日: 2019年6月20日
【Web開発＆Webデザイナー初心者向け】入力欄の基礎知識
やっぱり Webは単なる情報開示だけでなく、ユーザーと情報をやり取りできる方が楽しいですよね。
そんな時必要になってくるのが「入力欄」。
普段ユーザー登録やコメント書き込みなどで使っている「入力欄」ですが、自分で作ろうと思うとどうでしょうか？
今回は、 Web制作初心者むけにいろんなケースの「入力欄」をご紹介します。
【紹介するケース】
- 基本的な入力欄
- AngularJSの場合の入力欄
- Ruby on Railsの場合の入力欄
- Djangoの場合の入力欄
- WordPressの場合の入力欄
【初心者向け】Web開発＆Webデザインナー必見の入力欄の基礎知識
まずはじめに入力欄が使われているケースを改めて確認してみたいと思います。
入力欄が使われている例
ユーザー間のコミュニケーションに
SNSやオークションサイトをはじめ、ネット上で当たり前のようにコミュニケーションが取れるようになった今日。ユーザー登録やアイテム登録、ユーザー間のメッセージに「入力欄」が使われていますね。物品交換サービスの ジモティー や メルカリ などが有名。
ブログに
ブログサイトの中には、ユーザーとコミュニケーションを図るために「コメント欄」を設置しているサイトもあります。例えば freshome というブログサイトは、 WordPress 製のブログで、コメント以外にもメルマガ登録のポップ表示や検索欄に「入力」を使用。
計算や翻訳に
単位の換算や翻訳、自分では分からないことを Webに頼る方も少なくないと思います。例えばこちらの計算サイトでは、自分の数字を入力すると、自動計算して答えを表示、助かりますねぇ。
この他にも、インターネット学習や病院の予約、確定申告（ネット版）でも名前入力や番号入力が使われるなど、もはや「入力欄」は私達の生活に欠かせないものとなっています。次は、そんな「入力欄」作ってみましょう。
入力欄を作ってみましょう
入力欄の作成は、基本的には HTML を使います。
【サンプルコード】
名前： <input>
コメント：<textarea></textarea>
【実行結果】
名前：
コメント：
名前やパスワードなど 1行の入力には <input> が使われ、 コメントや備考など複数行になりそうな場合は <textarea> が使われます。しかし、入力欄を設けただけでは何の機能もなく、文字や数字を入力しても、ただそれだけです。この入力欄に機能を付ける方法は、主に 2パターンあります。
入力欄にセットできる機能
入力欄にセットできる代表的な機能は、
- 入力内容の保存と再利用
- 入力内容を変数として扱い、自動計算に
でしょう。最初の 「入力内容の保存と再利用」 は、
- ユーザー登録
- コメント
- 商品登録
などに。この場合は、 <input>タグに加えて、内容を記録するデータベースと入力内容をデータベースに入れるためのプログラム（PHP や Ruby、 Python など）が必要になってきますね。
そしてもう一つの 「入力内容を変数として扱い、自動計算に」 は、<input>タグと演算用プログラム（JavaScriptなど）が必要に。
それぞれの例を以下にご紹介。とりあえず デモ で実際に値を入力して試してみて下さい。
サンプルプログラム／コメント機能
<?php
$hostname="localhost";
$db="データベース名";
$Username="ユーザー名";
$Password="パスワード";
$conn = mysqli_connect($hostname, $Username, $Password, $db) Or DIR ("データベース接続エラーです。。。");
if(isset($_POST['submit'])){
$user = $_POST['user'];
$comment = $_POST['comment'];
$sqlQuery="Insert into input(user, comment) Values('$user','$comment')";
if (mysqli_query($conn, $sqlQuery))
{
echo "送信完了";
}
else {
echo "送信失敗";
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<h1>入力機能デモ</h1>
<p>試しにコメントしてみて下さい</p>
<hr>
<table>
<tr>
<td>お名前</td>
<td><input type="text" name="user"></td>
</tr>
<tr>
<td>コメント</td>
<td><textarea name="comment"></textarea></td>
</tr>
</table>
<input type="submit" name="submit" value="送信">
</form>
<hr>
<h2>コメント履歴</h2>
<table>
<thead>
<tr>
<th>ユーザー</th>
<th>コメント</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect($hostname, $Username, $Password, $db);
if($qry = mysqli_query($conn,"SELECT * FROM input")){
while($show = mysqli_fetch_assoc($qry)){
echo "<tr>";
echo "<td>".$show['user']."</td>";
echo "<td>".$show['comment']."</td>";
echo "</tr>";
}
}
?>
</tbody>
</table>
<hr>
<hr>
<div style="background-color:gray;color:white;text-align:right">
<?php
echo 'Current PHP version: ' . phpversion();
echo '<br />';
echo 'Current MySQL version: ' . mysqli_get_server_info($conn);
mysqli_close($conn);
?>
</div>
</body>
</html>
サンプルプログラム／自動計算
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8 />
</head>
<body>
<h2>計算サンプル</h2>
<hr>
<form>
番号① <input type="text" id="first" ><br>
番号② <input type="text" id="second" >
<br><br>
<input type="button" onClick="AdditionBy()" Value="足す">
<input type="button" onClick="SubtractionBy()" Value="引く" >
</form> <br><br><hr>
<h2>計算結果 : <span id = "result"></span> </h2>
<script>
function AdditionBy()
{
num1 = document.getElementById("first").value;
num2 = document.getElementById("second").value;
document.getElementById("result").innerHTML = Number(num1) + Number(num2);
}
function SubtractionBy()
{
num1 = document.getElementById("first").value;
num2 = document.getElementById("second").value;
document.getElementById("result").innerHTML = Number(num1) - Number(num2);
}
</script>
</body>
</html>
コメントなどの 「入力データを保存＆再利用」 する場合は、データベースへの書き込みプログラムが入ってくるので、随分コードが長くなりますね。それに対して入力値を保存しない場合は、比較的コードが短い印象を受けます。
この他にも実際の Web社会では 「入力と同時にエラー喚起される」 とか 「<input> 以外の input」 などありますので、参考情報としていくつかのパターンの <input> をご紹介させて頂きます。
入力と同時にエラー喚起するケース
ユーザー登録やログイン画面で、入力中に 「入力内容が正しくありません」 と表示されることありませんか？こちらのケースでは主に AngularJS という JavaScriptフレームワークが使用されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://cdn.jsdelivr.net/angularjs/1.5.0/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/angularjs/1.5.0/angular-messages.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Angular Demo</title>
<style id="jsbin-css">
form * {
font-size: 16px;
padding: 3px 6px;
font-family: Arial;
display: block;
}
ng-message {
color: red;
}
button {
border-radius: 4px;
background: #eee;
border-width: 1px;
}
</style>
</head>
<body ng-app="app">
<form name="aForm" novalidate>
<label for="name">メールアドレス</label>
<input type="email" id="name" ng-model="name" name="aField" required>
<ng-messages for="aForm.aField.$error"
ng-show="aForm.aField.$invalid && aForm.aField.$dirty">
<ng-message when="required">必須項目</ng-message>
<ng-message when="email">有効なメールアドレスを入力してください</ng-message>
</ng-messages>
<button submit-if-valid="save()">Send</button>
</form>
<script id="jsbin-javascript">
console.clear();
angular.module('app', ['ngMessages'])
.directive('submitIfValid', function () {
return {
restrict: 'A',
require: '^form',
link: function (scope, element, attrs, form) {
element.on('click', handleClick);
function handleClick() {
markFieldsAsDirty();
submitFormIfValid();
scope.$apply();
}
function submitFormIfValid() {
if (form.$valid) {
scope.$eval(attrs.submitIfValid);
}
}
function markFieldsAsDirty() {
Object.keys(form)
.filter(function(key) {
return key.indexOf('$') === -1;
})
.forEach(function(fieldName) {
return form[fieldName].$setDirty();
});
}
}
};
});
</script>
</body>
</html>
実行結果
AngularJS で <input> を使う場合は、 <input> の中に ng-model= など様々な属性が付属される特徴がありますね。
話題の Ruby on Rails や Django の場合は？
将来的にフレームワークを使おうと考えている方向けに Ruby on Rails や Django ではどんな風に <input> が使われているか確認してみたいと思います。
Ruby on Rails
プログラミング初心者の中でも人気の Ruby on Rails。上記のようなコメント入力の場合、コードは
<%= simple_form_for([@post, @post.comments.build]) do |f| %>
<div class="field">
<div class="control">
<%= f.input :name, input_html: { class: 'input' }, wrapper: false, label_html: { class: 'label' } %>
</div>
</div>
<div class="field">
<div class="control">
<%= f.input :comment, input_html: { class: 'textarea' }, wrapper: false, label_html: { class: 'label' } %>
</div>
</div>
<%= f.button :submit, 'Leave a reply', class: "button is-primary" %>
<% end %>
となります。今までは、 <input> だったのが、
<%= f.input :name, input_html: { class: 'input' }, wrapper: false, label_html: { class: 'label' } %>
ちょっと特殊感がありますが、 Ruby on Rails の場合はこんな風に <input> のコードを書きます。
Django
上記のようなコメント欄、 Djangoではこんな風にコードを書いたりします。
{% load crispy_forms_tags %}
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-header">
<h2>Add New Comment</h2>
<form method='POST'>{% csrf_token %}
{{form|crispy}}
<button type='submit' class="btn btn-success">送信</button>
</form>
</div>
</div>
</div>
なんと Django では <input> がないのに 入力欄を表示することができます。 これは Web攻撃の一つである クロスサイトリクエスト（CSRF）を防止するために Django で標準装備されている機能に <input> が盛り込まれているため。ちょっと不思議な感じがしますね。
このように Ruby on Rails や Django をはじめとした フレームワーク を用いる場合、それぞれの方にあった HTML、 <input> の書き方に従う必要があります。
WordPressに入力欄を設ける場合は
【プラグイン Contact Form 7 の例】
投稿ページについては標準で「コメント機能」があるものの、固定ベージについてはコメントありませんよね。そんな時は以下の方法で 「入力欄」 を設置可能。
- プラグインの活用
- PHPコードを書いて入力欄を実装
試しに プラグイン「Contact Form 7」 を使って入力欄を設けてみましたが、設置からメール連絡まですごく簡単で、 PHP を知らない人でも大丈夫と思いました。
＼一流デザイナーのスキルが身に付く／
まとめ
Webで入力欄を設ける場合は、入力値を適切に処理するプログラムが必要になることを確認しました。データベースを用いる場合のプログラム、それからデータベースを用いない場合のプログラム、それぞれに特徴がありますので、可能であれば PHP や JavaScript、 MySQL なども合わせて学習していきたいですね。
また Ruby on Rails などフレームワークでは独特のインプット方法を使用。この時 HTML の <input> や <textarea> を知っておくと理解もスムーズになると思います。「独学でHTMLやっているけどチョットしんどい」「自分のコードであっているか不安」という方は、 『オンライン × マンツーマン』 で定評のあるプログラミングスクール CodeCamp を検討してみませんか？ 無料相談や無料体験も行っていますので、まずはホームページを覗いてみて下さい。
- この記事を書いた人
- オシママサラ
