--表单入门-- - 前段 - php中文网博客

首页 > 博客列表 > --表单入门--

博主信息

博文 7

粉丝 0

访问量 3615

专题推荐

更多>

表单的格式为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">


    <title>表单</title>
  </head>
  <body>
    <!-- action表示表单信息要传递到的文件 -->
    <!-- method表示传递的方式是POST"密文传送"或者GET"明文传送" -->
    //表示初始化时光标自动在这个文本框内
    <!-- required: 必填项, 不写不能提交 -->
    <form action="phpcn.php" method="post">
      <fieldset style="display: inline-grid; gap: 1em">
        <legend>新用户注册</legend>
        <!-- label 里的for的值必须是input内ID的值,才能进行绑定 -->
      <div class="user">
        <label for="user">用户名</label>
        <!-- type的值 text 为普通文本框 -->
        <input
          type="text"
          id="user"
          name="user"
          placeholder="文本输入框内显示"
          autofocus
          required
        />
      </div>
      <div class="email">
        <label for="email">邮箱</label>
        <!-- type的值为eamil时为邮箱类型.再提交的时候会进行邮箱的格式验证 -->
        <input
          type="email"
          id="email"
          name="email"
          placeholder="邮箱输入框内显示"
          required
        />
      </div>
      <div class="psw">
        <label for="psw">密码</label>
        <!-- type 的值为password时为密码类型.输入的时候会以“·”显示 -->
        <input
          type="password"
          id="psw"
          name="psw"
          required
          />
      <div class="chusheng">
        <label for="chusheng">出生年月</label>
        <!-- type的值为date时为日期格式。 -->
        <!-- value的值为默认的数据，也会在页面初始化的时候显示出来 -->
        <input
          type="date"
          id="chusheng"
          value="2000-01-01"
          name="chusheng"
          min="1999-12-12"
          />
      </div>
      <div class="sex">
         <!-- input.value === input.id === label.for  -->
         <!-- checked: 布尔属性, 默认选中 -->
          <!-- input.type.radio中的 input.name 必须全部相同,因为name是提交互服务器上的变量名 -->
          <!-- 只有全部相同,才能保证数据的唯一性 -->
          <!-- name=male,female, secret, male, 以最后你选择的那个值为准,只保留一个 -->
        <label for="nan">性别</label>
        <input type="radio" name="sex" value="nan" id="nan" checked ><label for="nan">男</label>
        <input type="radio" name="sex" value="nv" id="nv"  ><label for="nv">女</label>
        <input type="radio" name="sex" value="mi" id="mi"  ><label for="mi">保密</label>
      </div>
      <div class="hobby">
        <label for="">多选</label>
        <input type="checkbox"name="hobby[]" value="aa" id="aa"><label for="aa">aa</label>
        <input type="checkbox"name="hobby[]" value="bb" id="bb"><label for="bb">bb</label>
        <input type="checkbox"name="hobby[]" value="cc" id="cc"><label for="cc">cc</label>
        <input type="checkbox"name="hobby[]" value="dd" id="dd"><label for="dd">dd</label>
      </div>
      <div class="edu">
          <label for="">学历:</label>
          <!-- 下拉列表: 从一组预置的值选择一个或多个返回 -->
          <!-- 所以,变量的名称与值不在同一个元素上 -->
          <!-- name=uname, value=admin
          uname = admin
          都声明在 input 一个元素上,名值必须绑定到一个元素上input  -->
          <!-- <input type="text" name="uname" value="admin" /> -->
          <!-- name 和 value 不在一个元素上 -->
          <!-- select.name  -->
          <!-- option.value -->
          <select name="edu" id="">
            <!-- 提示的制作方式 -->
            <!-- <option value="" selected disabled>--请选择--</option> -->
            <option value="1">中学</option>
            <!-- selected: 默认选中  -->
            <option value="2" selected>大学</option>
            <option value="2">大学</option>
            <option value="3">博士</option>
          </select>
        </div>
    </fieldset>
      <button>提交</button>
    </form>
  </body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：添加一个结果图就更好了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开学第一天

2023-03-10 11:51:37

首页

最新更新

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

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