html5+css3 | フォームアプリケーション-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

黄舟

Feb 07, 2017 pm 01:20 PM

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) 単一行のテキスト入力ボックス

ユーザー名: 名前; アカウント番号: 値; ID 番号: maxlength

(2) パスワード入力ボックス<入力タイプ=”パスワード”/>

(3) ラジオボタン<入力タイプ=”radio”/>

(4) チェックボックス

(5) 通常のボタン

(6) Submitボタン<入力タイプ=” submit”/>

(7)リセットボタン

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

(9) 非表示フィールド

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

(11)メールタイプ

(12) URLタイプ

(13)電話タイプ

(14)検索タイプ

(15 )色の種類

(16)数値型

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

ログイン後にコピー

(17)範囲型

(18)日付ピッカー type

<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 までご連絡ください。