ホームページ > 記事 > ウェブフロントエンド > html5+css3 | フォームアプリケーション

html5+css3 | フォームアプリケーション

黄舟オリジナル: 2017-02-07 13:20:461878ブラウズ

1. フォームを作成するための基本的な構文形式は次のとおりです:

<from action=”url 地址”method=”提交方式”name=”表单名称”>
     各种表单控件
</form>

以下の例:

P212-213
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>创建表单</title>
</head>
<body>
<from action=”http://www.mysite.cn/index.asp”method=”post” id=”formBox”autocomplete=”on”>
  用户名：
  <input type=”text”id=”autofirst”name=”autofirst”/><br/><br/>
  账号：
  <input type=”text”name=”zhanghao”/>
  密码：
  <input type=”password”name=”mima”/>
  <input type=”submit”value=”提交”/>
</form>
</body>
</html>

2. input 要素の type 属性

(1) 単一行のテキスト入力ボックス a2703cf90faab2343e880df0ee367452

(6) Submitボタン0781d8314d178bc31ded76a20183c08b

(7)リセットボタン87f721c79371ebdb716c9e0fc68bc678

(8) 画像フォームの送信ボタン0da72a75a10c397362517abe94da35ee

(9) 非表示フィールドb36110a7fe5a79730b35a3506f95a3b4

(10)ファイルフィールドdf8066f79bd00260a85771a66046a171

(11)メールタイプ4b7546d54f40acea700fffc1f1663d2b

(12) URLタイプ9c88fc9ad4fd3f5ad14376e6c71cb1df

(13)電話タイプ831624ce0325d70af3300dcc380d2e33

(14)検索タイプ3990861fb5e9c4dddd43e6fdd8f2dd13

(15 )色の種類1e352bf79373d0d85cb4135acdd50c74

(16)数値型c60739fae520539654d1418b07e126fe

<input type=”number”name=”number1”value=”1”min=”1”max=”20”step=”4”/><br/>

(17)範囲型3acf269a19006f9518af3e161a1ea1e0

(18)日付ピッカー type1a0622451c8f7c749c22e99f1146fbb8

<form action=”#”method=”get”>
  <input type=”date”/>;
  <input type=”month”/>;
  <input type=”week”/>;
  <input type=”time”/>;
  <input type=”datetime”>
  <input type=”datetime-local”/>
  <input type=”submit”value=”提交”/>
</form>

3.その他の要素

(1)リスト属性

(2)複数属性

<form action=”#”method=”get”>
请输入网址：<input type=”url”list=”url_list”name=”weburl”/>
<datalist id=”url_list”>
  <option label=”新浪”value=”http://www.sina.com.cn”></option>
  <option label=”搜狐”value=”http://www.sohu.com.cn”></option>
  <option label=”传智”value=”http://www.itcast.cn/”></option>
</datalist>

(3) プレースホルダー属性

<form action=”#”method=”get”>
电子邮箱：<input type=”email”name=”myemail”multiple=”true”/>
上传照片：<input type=”file”name=”selfile”multiple=”true”/><br/><br/>
<input type=”submit”value=”提交“/>
</form>

(4) textarea要素

<form actiom=”#”method=”get”>
请输入邮政编码：<input type=”text”name=”code”pattern=”[0-9]{6}”placeholder=”请输入6位数的邮政编码”/>
<input type=”submit”value=”提交”/>
</form>

例:

<textarea cols=”每行中的字符数”rows=”显示的行数“>
 文本内容
</textarea>

(5)select element

<form action=”#”method=”post”>
评论：<br/>
     <textarea cols=”60”rows=”8”>
评论的时候，请遵纪守法并注意语言文明。
     </textarea><br/>
     <input type=”submit”value=”提交”/>
</form>

(6) datalist要素

<select>  //<optgroup>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

(7) keygen 要素

<form action=”#”method=”post”>
请输入用户名：<input type=”text”list=”namelist”/>
<datalist id=”namelist”>
  <option>admin</option>
  <option>lucy</option>
</datalist>
<input type=”submit”value=”提交”/>
</form>

フォームスタイル

<form action=”#”method=”get”>
请输入用户名：<input type=”text”name=”user_name”/><br/>
请选择加密强度：<keygen name=”security”/><br/>
<input type=”submit”value=”提交”/>
</form>

上記は html5+css3 フォームのアプリケーションコンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php .cn) を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5: Canvas を使用してビデオをリアルタイムで処理する次の記事：HTML5: Canvas を使用してビデオをリアルタイムで処理する

続きを見る

html5+css3 | フォームアプリケーション

関連記事