search

Home >Web Front-end >H5 Tutorial >html5+css3 | form application

html5+css3 | form application

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

1. The basic syntax format for creating a form is as follows: 

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

The following example: 

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. The type attribute of the input element

(1) Single-line text input box 797edfb94940e3e094cf185fe0ef94cf

Username: name; Account: value; ID number: maxlength

(2) Password input boxc6c251add0aabbfa348b726996144fa3

(3)Radio buttonfe6029296ed047b6c920e3e926c8b2e1

(4)Check box61bab3f617195461ae651bcb89a81fb3

(5)Normal button32b17f56ff1f993edc73a662a35e44c2

(6)Submit button55533b768015287057c44a213cff96f1

( 7) Reset button87f721c79371ebdb716c9e0fc68bc678

(8) Submit button in image form0da72a75a10c397362517abe94da35ee

(9) Hidden fieldb36110a7fe5a79730b35a3506f95a3b4

(10)File fielddf8066f79bd00260a85771a66046a171

(11)email type42dfebf9c01ef270323cd55fab25e3a2

(12)url type9c88fc9ad4fd3f5ad14376e6c71cb1df

(13)tel typee46f1e776d2f728e6d2781081251c36c

(15)color type1e352bf79373d0d85cb4135acdd50c74

(16)number typec60739fae520539654d1418b07e126fe

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

(17)range type3acf269a19006f9518af3e161a1ea1e0

(18)Date pickers 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. Other elements

(1)list attribute

<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)multiple attribute

<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)placeholder attribute

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


(4) textarea element 

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

Example: 

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

(5) select element 

<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

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

Form style

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

The above is the application content of html5+css3|form, more For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5: Use Canvas to process Video in real timeNext article：HTML5: Use Canvas to process Video in real time

Related articles

See more