简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > --表单入门--
Blogger Information
Blog 7
fans 0
comment 0
visits 2347
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
--表单入门--
东风又西风
Original
263 people have browsed it

表单的格式为lable+input，input内type设置不同的类型

text普通为本框 eamil邮件 password密码 date日期 number数字

<input type="text">

label 里的for的值必须是input内ID的值,才能进行绑定

<lable for="abc">内容</lable><input type="date" id="abc">

  2.     <title>表单</title>
  3.   </head>
  4.   <body>
  5.     <!-- action表示表单信息要传递到的文件 -->
  6.     <!-- method表示传递的方式是POST"密文传送"或者GET"明文传送" -->
  7.     //表示初始化时光标自动在这个文本框内
  8.     <!-- required: 必填项, 不写不能提交 -->
  9.     <form action="phpcn.php" method="post">
  10.       <fieldset style="display: inline-grid; gap: 1em">
  11.         <legend>新用户注册</legend>
  12.         <!-- label 里的for的值必须是input内ID的值,才能进行绑定 -->
  13.       <div class="user">
  14.         <label for="user">用户名</label>
  15.         <!-- type的值 text 为普通文本框 -->
  16.         <input
  17.           type="text"
  18.           id="user"
  19.           name="user"
  20.           placeholder="文本输入框内显示"
  21.           autofocus
  22.           required
  23.         />
  24.       </div>
  25.       <div class="email">
  26.         <label for="email">邮箱</label>
  27.         <!-- type的值为eamil时为邮箱类型.再提交的时候会进行邮箱的格式验证 -->
  28.         <input
  29.           type="email"
  30.           id="email"
  31.           name="email"
  32.           placeholder="邮箱输入框内显示"
  33.           required
  34.         />
  35.       </div>
  36.       <div class="psw">
  37.         <label for="psw">密码</label>
  38.         <!-- type 的值为password时为密码类型.输入的时候会以“·”显示 -->
  39.         <input
  40.           type="password"
  41.           id="psw"
  42.           name="psw"
  43.           required
  44.           />
  45.       <div class="chusheng">
  46.         <label for="chusheng">出生年月</label>
  47.         <!-- type的值为date时为日期格式。 -->
  48.         <!-- value的值为默认的数据，也会在页面初始化的时候显示出来 -->
  49.         <input
  50.           type="date"
  51.           id="chusheng"
  52.           value="2000-01-01"
  53.           name="chusheng"
  54.           min="1999-12-12"
  55.           />
  56.       </div>
  57.       <div class="sex">
  58.          <!-- input.value === input.id === label.for  -->
  59.          <!-- checked: 布尔属性, 默认选中 -->
  60.           <!-- input.type.radio中的 input.name 必须全部相同,因为name是提交互服务器上的变量名 -->
  61.           <!-- 只有全部相同,才能保证数据的唯一性 -->
  62.           <!-- name=male,female, secret, male, 以最后你选择的那个值为准,只保留一个 -->
  63.         <label for="nan">性别</label>
  64.         <input type="radio" name="sex" value="nan" id="nan" checked ><label for="nan">男</label>
  65.         <input type="radio" name="sex" value="nv" id="nv"  ><label for="nv">女</label>
  66.         <input type="radio" name="sex" value="mi" id="mi"  ><label for="mi">保密</label>
  67.       </div>
  68.       <div class="hobby">
  69.         <label for="">多选</label>
  70.         <input type="checkbox"name="hobby[]" value="aa" id="aa"><label for="aa">aa</label>
  71.         <input type="checkbox"name="hobby[]" value="bb" id="bb"><label for="bb">bb</label>
  72.         <input type="checkbox"name="hobby[]" value="cc" id="cc"><label for="cc">cc</label>
  73.         <input type="checkbox"name="hobby[]" value="dd" id="dd"><label for="dd">dd</label>
  74.       </div>
  75.       <div class="edu">
  76.           <label for="">学历:</label>
  77.           <!-- 下拉列表: 从一组预置的值选择一个或多个返回 -->
  78.           <!-- 所以,变量的名称与值不在同一个元素上 -->
  79.           <!-- name=uname, value=admin
  80.           uname = admin
  81.           都声明在 input 一个元素上,名值必须绑定到一个元素上input  -->
  82.           <!-- <input type="text" name="uname" value="admin" /> -->
  84.           <!-- name 和 value 不在一个元素上 -->
  85.           <!-- select.name  -->
  86.           <!-- option.value -->
  87.           <select name="edu" id="">
  88.             <!-- 提示的制作方式 -->
  89.             <!-- <option value="" selected disabled>--请选择--</option> -->
  90.             <option value="1">中学</option>
  91.             <!-- selected: 默认选中  -->
  92.             <option value="2" selected>大学</option>
  93.             <option value="2">大学</option>
  94.             <option value="3">博士</option>
  95.           </select>
  96.         </div>
  97.     </fieldset>
  98.       <button>提交</button>
  99.     </form>
  100.   </body>
  101. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：添加一个结果图就更好了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！