liguofeng29’s blog

個人勉強用ブログだっす。

┗━HTML5のform関連

HTML5のform関連 - バリデーションチェック

バリデーション属性を使う required pattern min,max,step checkValidityメソッドを使う setCustomValidityメソッドを使い、カスタムメッセージを表示する バリデーション属性サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> Validity </title> </head> <body> <form action="add"> book(必須)</form></body></html>

HTML5のform関連 - javascriptでクライアントファイル読み取り進捗表示

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> progress表示 </title> </head> <body> ファイル選択<input id="file1" type="file"/><br/> 読み取り進捗<progress id="pro" value="0"></progress> <div id="result"></div> </br/></body></html>

HTML5のform関連 - javascriptでクライアントファイル中身アクセス

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> ファイル中身アクセス </title> </head> <body> ファイル選択<input id="file1" type="file"/><br/> <div id="result"></div> <input type="button" value="テキスト読取" onclick="readText();"/><br/> </br/></br/></body></html>

HTML5のform関連 - 複数ファイル選択

HTML5以前では、下記のような制限があった。 単一ファイルのみアップロード クライアントコードはファイルパスのみ取得でき、内容アクセスはできない 複数ファイル選択&ファイルアクセス <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 複数file選択 </title> </head> <body> イメージ選択<input id="images" type="file" multiple accept="image/*"/> </body></html>

HTML5のform関連 - 新規input要素とoutput要素

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC" /> <title> input and output </title> </head> <body> <form action="do"> type="color":<br/><input name="color" type="color"/><p> output:<br/><output name="a" for="color" onforminput="innerHTML=color.value;">…</output></br/></p></br/></form></body></html>

HTML5のform関連 - 新規属性

form属性 : form要素外のコンポーネントもform属性を指定して、リクエストパラメータを生成する formaction属性 : submit毎にactionを指定する formxxx属性 : submit毎にenctype、POST/GET、formtargetを指定する autofocus属性 : ロード後にフォーカスを取…

HTML5のform関連 - input要素、label要素、button要素、select、textarea要素

1. input要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> input要素 </title> </head> <body> <form action="http://www.google.co.jp" method="get"> <label><b>input要素について</label></b><br/> type=text</br/>