--表单入门--

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
表单的格式为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>
【文章原创作者：滨海网页设计 http://www.1234xp.com/binhai.html 复制请保留原URL】
更多阅读