WEB関連を中心に学んだことを記録する|raining

HTML：スマホでフォームの入力モードを切り替える

Posted on 2014年7月17日 by raining

返信

HTMLで入力フォームを作成する場合、inputタグに「type=”text”」や「type=”password”」など
入力項目にあったtype属性を指定して作成します。

スマホ（スマートフォン）やタブレットでフォームの入力を行う際に
入力キーボードの切り替えなど、意外と大変な場合があります。

HTML5で追加されたinputタグのtype属性を使用すると
type属性によって入力モードを自動的に切り替えることができます。

数字のみ入力を行う場合などは数字入力用のキーボードが表示された方が、
ユーザーにとって使いやすいものになります。

下記にinputタグのtype属性を変更して、スマホやタブレットでのフォームの入力モードを切り替えた時のメモを記載します。

■ スマホ入力モード切り替え

※画像はiPhoneで撮影しています。

【type=”text”】

<input type="text" />

通常のテキスト入力用のキーボードが表示されます。

【type=”password”】

<input type="password" />

パスワード入力用のキーボードが表示され、文字は伏字になります。

【type=”email”】

<input type="email" />

キーボードにアットマーク「@」、ドット「.」が表示されます。

【type=”tel”】

<input type="tel" />

電話番号入力用のテンキー表示されます。

【type=”url”】

<input type="url" />

キーボードに「.com」、ドット「.」、スラッシュ「/」が表示されます。

【type=”number”】

<input type="number" />

数字・記号入力用のキーボードが表示されます。

【type=”date”】

<input type="date" />

日付入力用の選択キーボードが表示されます。

【type=”datetime”】

<input type="datetime" />

日付・時間入力用の選択キーボードが表示されます。

※上記以外のtype属性もあります。

ユーザーが入力しやすいように自動的に入力モードが切り替われば
入力がとても楽になり、快適に操作してもらえるようになると思います。

今回はiPhoneでしか確認していないので、Androidなども今度確認してみたいと思います。

HTML：スマホページの電話番号をリンクさせない方法

Posted on 2014年7月8日 by raining

返信

スマホ（スマートフォン）サイトを構築時、ページ内に電話番号を記載することがあります。

iPhoneでページを確認すると、勝手に電話番号がリンクされてしまいます。

iPhone（Safari）ではページ内の電話番号を自動でリンクするという機能があるので、
リンクさせたくない場合は対策が必要です。

下記にスマホページ内に記載している電話番号を自動リンクさせない方法をメモします。

■ 電話番号の自動リンク機能を無効にする

headタグ内に下記のコードを記述します。

<meta name="format-detection" content="telephone=no">

これを記述するとページ内に記載している電話番号の自動リンクを防ぐことができます。

また、電話番号に似た番号なども自動リンクしてしまう可能性があるので、
スマホページを作成する場合は設定しておいた方がいいと思います。

電話番号にリンクを貼りたい場合は下記のように個別で設定します。

<a href="tel:000-0000-0000">000-0000-0000</a>

「tel:電話番号」でリンクを設定します。

上記のようにすれば、電話番号を勝手にリンクすることがなくなるので、
間違いが起きないと思います。

HTML：スマホのホーム画面にサイトのアイコンを表示

Posted on 2014年6月26日 by raining

返信

スマホ（スマートフォン）やタブレットで、頻繁に利用するWEBサイトを
すぐ確認できるようにホーム画面に追加することがあります。

iPhoneの場合「ホーム画面に追加」を選択すればホームにサイトのアイコンを表示し
ブックマークすることができます。

しかし、アイコンの設定をしていないと、サイトのキャプチャ画像で登録されてしまいます。

アイコンを指定する場合、HTMLに下記のコードを追加すればアイコンを表示することが可能です。

下記に、スマホのホーム画面に指定したアイコンを表示した時の方法をメモします。

■ ホーム画面にサイトのアイコンを表示

ホーム画面に使用するアイコンの画像を用意します。

※今回は120px×120pxで作成しました。

作成したアイコンをアップロードし、headタグ内に下記のコードを記述します。
光沢のあり・なしを設定することが可能です。

※URLはアイコンまでのパスを指定します。

【光沢ありの場合】

光沢ありの場合は「apple-touch-icon」を指定します。

<link rel="apple-touch-icon" href="http://raining.bear-life.com/apple-touch-icon.png" />

【光沢なしの場合】

光沢なしの場合は「apple-touch-icon-precomposed」を指定します。

<link rel="apple-touch-icon-precomposed" href="http://raining.bear-life.com/apple-touch-icon.png" />

コードを記述し、サイトにアップロードします。
アップ後、「ホーム画面に追加」をすれば、上記のアイコンのように表示することができます。

上記はiPhoneでのみ確認しています。
また、ベーシック認証をかけているとアイコンを設定することができないので注意です。

Androidの場合は標準のブラウザではなく、Chromeで追加するとホーム画面にアイコンが表示されます。
ただ、バージョンによるかもしれませんので試してみてください。

HTML：改行文字列をtextarea内で表示

Posted on 2013年11月28日 by raining

返信

phpで作成した改行を入れた文字列をtextarea内に挿入して表示させる時に、改行がうまくいかなかったのでメモします。

下記のように改行箇所に「\n」や「<br>」をテキストエリアに入れてもそのまま表示されてしまいました。

<?php
$text = 'テスト\nテスト';
?>

<textarea><?php echo $text; ?></textarea>

テキストエリア内で文字列を改行させて表示させる場合は改行コードの「」を改行箇所に入れると正しく改行されて表示されました。

<?php
$text = 'テスト&#13;テスト';
?>

<textarea><?php echo $text; ?></textarea>

また、データベースから取得したデータは改行されたまま表示されます。

上記が正しい方法かわかりませんが、テキストエリア内で改行することは確認できました。

HTML：HTML5のrequired属性で必須チェック

Posted on 2013年10月23日 by raining

1

HTML5でinput要素にrequired属性を設定すると値が存在するかを判定し、必須のチェックをすることができます。

※Firefox24.0
※ブラウザによって表示が違います。

指定の仕方はinput要素にrequired属性を記述するだけです。

required="required"

しかし、ブラウザのバージョンや対応していないブラウザもあるようなので、バリデーションの処理はしっかり行う必要があります。

HTML5でinput要素にrequired属性を設定し、必須チェックを行った時の方法をメモします。

■ required属性

submit時に必須チェックを行い、エラーメッセージを出力します。

■ required属性で必須チェック

input要素にrequired属性を設定します

<form action="" method="post">

    <input type="text" name="hoge" value="" required="required" />
    <br>
    <input type="submit" name="save" value="保存" />

</form>

値を入力せずにサブミットすると下記のようにエラーメッセージが表示されます。

「input」以外にも「textarea」や「select」でも設定することができます。