温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » スクリプト入門 » コンタクトフォームを作る jQueryの学校を読んで

— 広告 —


— 広告 —

コンタクトフォームを作る jQueryの学校を読んで

所要時間 約 2分

jquerybook マイナビ社から出版された「やさしくはじめる WebデザイナーのためのjQueryの学校」 p.154

ラベル付きのコンタクトフォームを作ろう(1)を読み解きながら、jQueryの使い方を習得。

jQueryなんて簡単!! と思っていたけど、ちゃんと勉強しないとダメですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
ラベル付きのコンタクトフォームの作成 その3
</title>
 
<script src="../js/jquery.js"></script>
 
<script>
$(function() {
    $(".textbox").each(function() {
        var labelText;
        labelText = $(this).val();
        $(this).focus(function(){
                if( $(this).val() == labelText ) {
                        $(this).val("");
                }
        }).blur(function(){
                if( $(this).val() == "" ) {
                        $(this).val(labelText);
                }
        });
    });
});
</script>
 
</head>
<body>
<p>ラベル付きのコンタクトフォームの作成 その3<br></p>
<form method="post" action="#">
    <p><input type="text" class="textbox" size="40" name="name" id="name" value="お名前" /></p>
    <p><input type="text" class="textbox" size="40" name="email" id="email" value="メールアドレス" /></p>
    <p><textarea cols="60" rows="5" class="textbox" name="message" id="message">メッセージ</textarea></p>
    <p><input type="submit" class="button" value="送信" /></p>
</form>
</body>
</html>

-- 広告 -- -- 広告 --

 

この記事に関連する記事一覧

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。