変数でフォームの値を保持しておく | beginners CGI
何かの再編集フォームを作る際に、今までのデータを編集フォームで再現する方法です。 実際には記録ファイルから読み込み、記録されている値によってボタンをチェック状態にしたり、 入力フォームに記録ファイルの内容を表示しておくなどの利用方法で使います。 一行テキストエリアは value の部分に変数を使うと既に入力された状態になります。 下の例ではテキストエリアに既に 値を入れておく と入力されている状態です。 【テキストエリアの場合】 #!/usr/local/bin/perl $aaa = "値を入れておく"; print "Content-type: text/html\n\n"; print <<"HTML"; <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HE
HTML - ラジオボタン、チェックボックス、セレクトボックス
ラジオボタンは一般的に少数の項目などに使用される場合が多いです。 今回は性別を例にしたいと思います。 同じ名前にすることにより、同一グループになり片方だけ選択できるようになります。 デフォルトでチェックをしたい場合はchecked を使用します。 構文 <input type="radio" name="名前" value="送信する値" checked> 使用例 性別 <input type="radio" name="seibetu" value="0">男 <input type="radio" name="seibetu" value="1">女 性別 男 女 複数の項目を選択することができます。 好きな動物を選択できるようにした例です。 デフォルトでチェックをしたい場合はchecked を使用します。 構文 <input type="checkbox" name="名前" val
HTML5 input type のブラウザ対応について検証してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる？ 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は？ Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
フォーム関連要素（終） HTML5で仕様になった入力値チェック＋便利な3Tips
フォーム関連要素（終） HTML5で仕様になった入力値チェック＋便利な3Tips：HTML5“とか”アプリ開発入門（9）（1/3 ページ） HTML5で強化された入力フォームに関する話題は、今回でいったん終わりとします。これまでの3回で、＜input＞要素に加えられた変更と、新たに追加された＜form＞関連の要素についてお話ししてきました。 今回の話題は、フォームの入力値チェック（バリデーション）が主になります。また、autofocus属性やform属性など、これまでの記事で触れられなかった内容も紹介したいと思います。 HTML5では入力値チェックの仕組みが“仕様”に HTML 4までは、フォームに入力された値をチェックする仕組みがほとんど備えられていませんでした。そのため、入力値のチェックは基本的にサーバサイドでのみ行うか、JavaScriptを用いてチェックする必要がありました。 しか
IEでキャッシュが消えるバグ - 生涯一マークアップエンジニアだっ！！
http://pasokoma.jp/bbs6/lg115693 http://gac.kir.jp/10/20864 この質問で出ているような現象。この現象が自分のところでも起こった。 どういう現象かというと １）入力フォームに値を入力 ２）入力した状態のまま、「新しいウィンドウ」を開く ３）次画面に遷移する ４）ブラウザの「戻る」ボタンで戻る（もしくはhistory.back()） ５）入力項目が消えている 本来ならば、入力項目を保持されるはず。 どうも色々調べていると、サイトによってキャッシュが消えてしまう場合があるらしい。 複数ウィンドウを開いたままブラウズしていると、キャッシュが消えるとのこと。 これを回避するために、下記のように明示的にキャッシュを残させるようにした <meta content="86400" http-equiv="Expires"/> 一応これで解決。 ただ
日曜プログラミング講座/PHP言語 - WEB要素編 - Water-Sunlight
GETとPOST HTTPで、クライアント（ブラウザなど）からサーバへのデータを送信する際に最も良く使われる方法（メソッド）は GET と POST です。 GETメソッド ------ 送信データをURLの一部としてサーバに送る POSTメソッド ----- HTTPボディに送信データを格納してサーバに送る 次のようなHTMLフォームを考えて見て下さい。 <form action="form.cgi" method="get"> ID <input type="text" name="id"> PASSWORD <input type="text" name="pass"> <input type="submit"> </form> このフォームで送信ボタンを押すと、ブラウザはGETメソッドを使ってサーバにデータ( id と pass )を送信します。 また、method を "post
GETメソッドの研究 'PERL-LABO'
研究内容 ブラウザからGETメソッドで送信されたデータをCGIプログラム側で受け取る仕組みを研究します。 詳細 やりとりがしたい CGIプログラムの面白いところは、ホームページに来てくれた訪問者様と なにかやり取りというか、インタラクティブなことができるということだと思います。 アクセスカウンターやアクセス解析のような、訪問者様と特に無関係に動作する CGIプログラムもいろいろ便利ですが、やっぱり掲示板のような、訪問者様が参加できるような ものが作れるというのが楽しいです。 実際、メールフォームとかアンケートとか、なにか訪問者様から情報をもらって、 その情報を処理するCGIプログラムというのはとても沢山あります。 ここから、そういうCGIプログラムを作る基礎として、訪問者様から情報を受け取る CGIプログラムというものを 研究したいと思います。 ブラウザ側の話 情報を受け取るには、情報を送
[perl] 学習メモ：Hello world!! → GET値の取得と処理 → ファイルの内容出力
ちょっとPerlが必要になったので、Hellow worldからの過程をメモることにします。 このエントリーの最終目標は、[Ajax + PHP] Web2.0的にHTMLソースを隠す方法 で晒した Request.phpでやってることで、 GETを取得（pとaction） 取得したGET値pに基づいてファイルを読み込む 読み込んだファイルの内容を出力 です。 Perlが使えるとさくらインターネットのライトプランみたいなPerlのCGIしか許可されてない鯖で強い。 安価な鯖だとPHPダメって所は多いです。 現時点での自分の状況を書くと… CGI設置経験は豊富（でも最近ご無沙汰） PHPやJavaScriptの文法を元にそこそこ読めるけどイチからは書けない 人が書いたソースのカスタマイズはそれなりに出来る Perlでのファイル操作は全く知識がない POSTとGETの扱いも良く分からない C+
![[perl] 学習メモ：Hello world!! → GET値の取得と処理 → ファイルの内容出力](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
GETとPOSTどちらでもOKなデータ受信関数の研究 'PERL-LABO'
研究内容 HTMLフォームからのデータの送信方法にはGET/POSTの２通りがありました。 どちらでデータを送るのかはHTML側で指定しますが、 CGIプログラム側で、どちらの形式でもデータを受け取れるようにしておけば、 便利ですよね。HTML側で、どちらの形式でデータを送ったらいいんだろう？ と考えずに済みますから。もしそうなっていなくて、 GETしか受け取れないCGIプログラムには必ずGETで、 POSTしか受け取れないCGIプログラムには必ずPOSTで、なんてことに なったらそらもう大変ですよね。 GET/POSTのどちらでもデータを受け取れる仕組み。便利です。 こういう便利なものっていうのは、関数っていうものにしておくと 分かりやすくてもっと便利です。 GET、POST、どちらの送信方法にも対応した、フォームデータ取得関数 getformdata関数を作成します。 結果 GET/P
フォームからの入力を受け取る - Web Liberty
フォームからの入力を受け取る フォームからの入力を受け取る フォームからの入力内容を表示するプログラム フォームからの複数の入力内容を表示するプログラム フォームからの入力内容をファイルに記録するプログラム フォームからの入力を受け取る 掲示板などで使用されるフォームからデータを受け取る方法です。フォームとは、以下のようなものです。 サンプルフォーム お名前 性別 男性 / 女性 職業 メッセージ 送信前にプレビューを表示 フォームから値を受け取るためのプログラムは以下のようになります。少々難しいので、完全に理解できなくても大丈夫です。とりあえず、決まり文句だと思っておいてください。（詳しい内容はフォームからの入力を受け取る処理の詳細解説をご覧ください。） if ($ENV{'REQUEST_METHOD'} eq 'POST') { read(STDIN, $alldata, $ENV{
入力フォーム編 (GET と POST データを受け取るには) | futomi's CGI Café
CGI を作成する上で、テキストボックスやラジオボタンなどのフォームに入力、選択された状態を取り込むことは避けてとおれません。 ここでは、入力フォームのデータをどのように CGI で取り込むのかを紹介します。 初心者向けに冒頭でで GET と POST についても解説します。 目次 HTTP メソッド フォームデータをサーバーに送信する方法 (メソッド) には GET メソッドと POST メソッドがあります。 HTTP プロトコルでは、他に PUT メソッドや DELETE メソッドも規定されていますが、 ブラウザーで利用できるのは GET メソッドと POST メソッドの 2 つだけです。 GET メソッドやは、HTTP/0.9 から規定されており、当時ではデータをサーバーに送信する唯一の手段でした。 今でもデータ送信手段として使われていますが、送信データが URL としてブラウザーの
フォームからの入力を受け取る処理の詳細解説 - Web Liberty
フォームからの入力を受け取る処理の詳細解説 最後に、フォームからの入力を受け取る処理の詳細な解説をしておきます。ここまで読み進めてきた方ならば理解できると思います。 フォームからの入力を受け取る処理は以下になります。 if ($ENV{'REQUEST_METHOD'} eq 'POST') { read(STDIN, $alldata, $ENV{'CONTENT_LENGTH'}); } else { $alldata = $ENV{'QUERY_STRING'}; } foreach $data (split(/&/, $alldata)) { ($key, $value) = split(/=/, $data); $value =~ s/\+/ /g; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack('C', hex($1))/eg; $val
WordPress：コメントフォームをカスタマイズする方法 - NxWorld
このブログでもコメント部分はプラグインを使用していたりと、WordPressのコメントフォームを触ったことがあまりないなとふと思って改めて見直したり試したりしたので、そのときの備忘録も兼ねてコメントフォームを自分好みにカスタマイズする方法などを紹介します。 カスタマイズといってもガッツリいじる感じとか難しいようなものではなく、文言やマークアップを少し変更するなど、デフォルトにちょっとだけ手を加えるような簡易的なものです。 最近だとJetpackやDisqusなどの手軽に実装できる便利なプラグインが沢山あることもあって、そういったものを取り入れているブログも多く見かけますが、以下はデフォルトのコメントフォームの使用方法やちょっとしたカスタマイズ方法になります。 ソーシャルアカウントと連携させたいとかになるとやはりプラグインを使った方が手っ取り早く実装できますが、デフォルトの機能で十分というこ
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
フォーム入力時の全角/半角モードを指定 - スタイルシート
フォーム入力時に、テキスト領域などにフォーカスすると、自動的に全角モードまたは半角モードに切り替えます。 ただし、Internet Explorer5.0↑で有効になります。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .txtmode1 { ime-mode: active; /* 全角モード */ } .txtmode2 {
Linuxに使われる日々 : buttonタグとsubmitの関係 - livedoor Blog（ブログ）
Linuxに使われる日々 主にLinux関連の話題中心にお届けしております。 たまに、家族や友達のこと。パソコンのことなど趣味や日々の思い付きを書いてます。 < ハラペコアオムシパンひかる木 > 2010年02月26日11:27 カテゴリ業務連絡（ただの覚書）Webサービス buttonタグとsubmitの関係 My Yahoo!に追加 そろそろWeb作成記事は単独のカテゴリにした方がいいかな？と思いつつそのまま(^^; それはさておき、先日からstruts関連の記事を書いてるんですが、struts以前の初歩の初歩でつまづいたのでメモメモφ(．． ) 通常submit処理をしたいときは ・ ・ ・ <form action="/hoge.do"> <input type="text" name="hoge"/> <input type="hidden" name="huga"/> <inp
メールフォームプロ
無料の高機能で作り方も簡単なメールフォームプロCGIです。複数送信やアンケートフォームや応募フォームとして利用できます。文字コードUTF-8対応でレスポンシブWebデザインでスマートフォンにも対応。MTでもWordPressでも使えるショッピングカート機能付き高機能無料メールフォームCGIです。中国語や韓国語への対応やクレジット決済機能も。Googleスプレッドシートとの連携も可能。 メールフォームプロCGIの概要Perlで書かれたアンケートフォームや応募フォームとして無料で利用できるメールフォーム（エントリーフォーム）のCGI高機能版です。高機能と言うことで、DOMを駆使した確認画面と一般的なメールフォームにたぶんあまり付いていない効果計測機能が実装されております。簡単設置の概念を幾分抑え、全ての設定をCGI側に設定する必要がある点が大幅な変更点となります。 もちろんスマートフォンへも完
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.bluearrowslab.com/smartphone/topicks/125/
http://onlineconsultant.jp/pukiwiki/?%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0Pro4%20%E7%A2%BA%E8%AA%8D%E7%94%BB%E9%9D%A2%E3%81%8C%E5%87%BA%E3%81%AA%E3%81%84