h5中的表单

最新推荐文章于 2024-07-29 00:36:24 发布

Onlyjr123

最新推荐文章于 2024-07-29 00:36:24 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/Onlyjr123/article/details/71169811

版权

本文探讨了HTML5中表单的新特性和使用方法，包括require属性和placeholder属性的详细解释，帮助开发者更好地理解和利用这些功能来提升用户体验。

摘要由CSDN通过智能技术生成

表单<form action="表单提交地址" method="提交方法（get/post）"></form>

注意： require:必填项 placeholder 。

代码显示：

<form action="JR01.html" method="post"> <!--
                                                    get跳转地址时地址后面显示表单后面的内容
                                                                                            -->
    <table >
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" value="默认值" name="username">
                <input type="email">
                <input type="month">
                <input type="color">
                <input type="time">

            </td>
        </tr>
    <tr>
        <td>密 码</td>
        <td>
            <input type="password" name="userpwd" placeholder="请输入密码"required pattern="/a/">
        </td>
    </tr>

        <tr>
            <td>性 别</td>
            <td>
                <input type="radio"name="sex" value="1">男
                <input type="radio" name="sex" value="2">女
            </td>
        </tr>

        <tr>
            <td>爱 好</td>
            <td>
                <input type="checkbox"name="hobby" value="1">唱歌
                <input type="checkbox" name="hobby" value="2">看书
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="reset"value="清空" >
                <input type="submit" value="注册">
                <input type="button" value="普通按钮"><!--没有特殊功能-->

            </td>
        </tr>

        <tr>
            <td>城 市</td>
            <td>
                <select name="city">
                    <option value=""烟台>烟台</option>
                    <option>青岛</option>
                    <option>大连</option>
                    <option>北京</option>
                </select>
            </td>
        </tr>

        <tr>
        <td>头 像</td>
        <td>
            <input type="file">
        </td>
    </tr>

        <tr>
            <td>协 议</td>
            <td>
                <textarea
                        cols="10"rows="5">
                </textarea> <!--多行文本区域-->
            </td>
        </tr>
</table>
</form>
<form action="JR02.html" method="post">
    <table>
        <tr>

            <td>
              用户名<input type="text" name="username">
            </td>
        </tr>
        <tr>

            <td>
            密 码<input type="password" name="userpwd">
            </td>
        </tr>
        <tr>

            <td>
                性别  <input type="radio" name="sex" value="1">男
                <input type="radio" name="sex" value="2">女
            </td>
        </tr>
        <tr>

            <td>
                爱好 <input type="checkbox" name="hobby" value="1">运动
                <input type="checkbox" name="hobby" value="2">聊天
                <input type="checkbox" name="hobby"value="3">玩游戏
            </td>
        </tr>
<tr>

    <td>
       出生日期： <input type="text" name="birth">年


       <select>
           <option>选择月份</option>
           <option>1月</option>
           <option>2月</option>
           <option>3月</option>
           <option>4月</option>
           <option>5月</option>
           <option>6月</option>
           <option>7月</option>
           <option>8月</option>
           <option>9月</option>
           <option>10月</option>
           <option>11月</option>
           <option>12月</option>
       </select>月

      <input type="text" name="day">日
    </td>
</tr>
  <tr>
            <td>
                <input type="file" >
          <input type="button" value="浏览">
      </td>
      <tr>
      <td>
          <h4>阅读协议</h4>
               <textarea cols="15" row="5">欢迎阅读服务条款协议</textarea>
           </td>
</tr>
        <tr>

            <td>
                同意以上协议<input type="checkbox">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="注册">
                <input type="reset" value="重填">
            </td>
        </tr>
    </table>
</form>

邮件email 类
表单外框<fieldest> <legend></legend> <fieldest>

<form>
    <fieldset style="border: 1px solid red">
        <legend>基本信息</legend>
        <table>
            <tr>
                <td>姓名</td>
                <td><input type="text" pattern="/a/"placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit"name="提交"></td>
            </tr>
        </table>
    </fieldset>
</form>

具体实例：

</form>
<form action="JR02.html" method="post">
    <h2>
    <span style="color: orange" >合作</span>意向表
    </h2>
    <p>
    <span style="color: orange" >我们在收到您的需求后，会在第一时间与您取得联系</span>
    </p>
<table>
    <tr>
        <td>公司名称：</td>
        <td><input type="text" name="company"></td>
    </tr>
    <tr>
        <td>姓名：</td>
        <td><input type="text"name="name"></td>
    </tr>
    <tr>
        <td>电话：</td>
        <td><input type="text" name="telphone"></td>
    </tr>
<tr>
   <td> <p>
        <span style="color: orange" >您需要的服务</span>
    </p>
   </td>
</tr>

        <tr>

            <td>
               <input type="checkbox" value="1"> 网站建设与传播
            </td>
            <td>
                     <input type="checkbox" value="2">电子商务</td>
        </tr>
        <tr>
        <td >
          <input type="checkbox" value="3"> 数字化展馆
            </td>
            <td>
        <input type="checkbox" value="4"> 多媒体互动 </td>
        </tr>
        <tr>
            <td >
                <input type="checkbox" value="2"> 软件服务
                </td>
            <td>
            <input type="checkbox" value="2"> 移动开发</td>
            </td>
        </tr>
    </table>
</form>