Heim >Web-Frontend >H5-Tutorial >html5+css3 |. Formularanwendung

html5+css3 |. Formularanwendung

黄舟Original: 2017-02-07 13:20:461915Durchsuche

1. Das grundlegende Syntaxformat zum Erstellen eines Formulars ist wie folgt:

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

Das folgende Beispiel:

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. Das Typattribut des Eingabeelements

(1) Einzeiliges Texteingabefeldedf4a017b5880a73f09b223ff464b722

Benutzername: Name; Kontonummer: Wert; maxlength; 2) Passwort-Eingabefeld0608d71b15486a72f60e99a8d46ad98e

(3) Optionsfeldb80f77e4478ead56500478d7ce206faf

(4) Kontrollkästchenbc1751b26f6e4d0719e16ccbb539d3a2

(5)Normale Schaltflächeb156c9c3f07b3b9aaf632cbe96eb4966

(6)Senden-Schaltflächec12c143232ff2f9622472354b410756c

(7)Reset-Schaltfläched95d1bec2728e97911362d25019454b5

(8) Senden-Schaltfläche in Bildform4ee64b57db6e74fe3e194ff4678c996c

( 9)Verstecktes Feldffb8bf99d39b3b7164914f0833fd0c41

(10)Dateifeld84a1998615c630ec1ee39aa8af7362a6

(11)E-Mail-Typ 6aed2e54bd568d800b72d78802d0c89b

(12)url type5b8d5a48aeeb200272e8954a7f20cbfa

(13)tel type49efbb0aef568993b95b105993d2b894

(14)Suchtypd4ba89b796afefc910e2e9c0844fb37c

(15)Farbtypeba9f8689a531a09cfb37123c139f9a8

(16) Zahlentyp817ab673e1d6deb92d893dc2130c5998

(17)Bereichstyp4c024f95ff23e87b446d4cad0dabb768

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

(18)Datumsauswahltypd0536ccd53109916834cf40f7c456502

3. Andere Elemente

<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>

(1)Listenattribut

<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>

(2) Mehrfachattribut

<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>

(3) Platzhalterattribut

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

(4) Textbereichselement

Beispiel:

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

(5) Element auswählen

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

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

(6)Datalist-Element

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

(7)keygen-Element

Formularstil

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

Das Obige ist der Anwendungsinhalt des HTML5+CSS3-Formulars. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>CSS控制表单样式</title>
 
<style type="text/css">
body{ font-size:12px; font-family:"宋体";}
body,form,input,p{ padding:0; margin:0; border:0;}
form{
              width:320px;
              height:150px;
              padding-top:20px;
              margin:50px auto;
              background:#f5f8fd;
              border-radius:20px;
              border:3px solid #4faccb;
}
p{
              margin-top:15px;
              text-align:center;
}
p span{
              width:40px;
              display:inline-block;
              text-align:right;
}
.num,.pass{
              width:152px;
              height:18px;
              border:1px solid #38a1bf;
    padding:2px 2px 2px 22px;
}
.num{
               background:url(images/1.jpg) no-repeat 5px center #FFF;
               color:#999;
}
.pass{
               background:url(images/2.jpg) no-repeat 5px center #FFF;
}
.btn01,.btn02{
              width:60px;
              height:25px;
              border-radius:3px;
              border:1px solid #6b5d50;
              margin-left:30px;
}
.btn01{ background:#3bb7ea;}
.btn02{ background:#fb8c16;}
</style>
 
<link rel="stylesheet" href="Untitled-1.css" type="text/css">
</head>
<body>
<form action="#" method="post">              
     <p>
    登录：<input type="tel" name="telphone" pattern="^\d{11}$" required/>
     </p>
      <p>
    密码：<input type="tel" name="telphone" pattern="^\d{11}$" required/>
    </p>
    <p>
        <input type="button" class="btn01" value="登录"/>
        <input type="button" class="btn02" value="注册"/>
   </p>
</form>
</body>
</html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeitenNächster Artikel：HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten

In Verbindung stehende Artikel

Mehr sehen