对于表单的一些想法

2018-06-22 05:05:53来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

表单

<form id="" name="" method="get/post" action=""> 其中get提交长度有限制,并且编码后内容在地址栏可见,post与其相反。

</form>

 

文本输入

文本框<input type="text" id="" name="" value=""/ placeholder是文字变灰>

密码框<input type="password" id="" name="" value=""/>

文本域<textarea name="" id="" cols="字符多少" rows=“几行” ></textarea>

 

按钮

提交按钮<input type="submit" name="" id="" value="" disabled=""/>

点击后form内提交服务器地址

重置按钮<input type="resest" name="" id="" value=""/>

普通按钮<input type="button" name="" id="" value=""/>

图片按钮<input type="image" name="" id="" value="" src="图片地址"/>

其中disabled是按钮失效的意思

 

单选与多选

单选

<input type="radio" id="" name="" value=""/>

<label for=""></label>

多选

<input type="checbox" id="" name="" value=""/>

<label for=""></label>

 

下拉列表

<select name="" id="" size="" multiple="multiple">      size大于1是列表,multiple是多选

<option value="">内容</option>

<option value="" selected="slected">内容</option>    selected是设为默认

</select>

 

文件上传

<input type="file" name="" id=a''/>

具体以作业为例-------制作一张注册表

<body>
  <table width="300px" height="400px" border="1" background="PPS 2011-08-30 20'49''12.jpg" >
    <tr>
      <td>
        <form method="post" action="http://www.sina.com">
      <table border="1px">
    <tr>
      <td>登录名:</td>
      <td>
        <input type="text" name="userid" value="" placeholder="登录名" required="required">
      </td>
    </tr>
    <tr>
      <td>密码:</td>
      <td>
        <input id="a" type="password" name="pwd" value="" required="required" placeholder="请输入1~16位密码">
      </td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td>
        <input id="b" type="password" name="pwd" value="" required="required" placeholder="请输入1~16位密码">
      </td>

    </tr>
    <tr>
      <td>手机号:</td>
      <td>
        <input id="m" type="text" name="4" value="" placeholder="仅用于找回密码">
      </td>
    </tr>
   
     <tr>
      <td>性别:</td>
      <td>
        <input type="radio" name="r1" value="a" value="1"/>
          <label for="r1">男</label>
        <input type="radio" name="r1" value="a" value="2"/>
          <label for="r1">女</label>
      </td>
    </tr>
    <tr>
      <td>生日:</td>
      <td>
        <input type="text" name="shengri" value="" id="111111111" />
      </td>
    </tr>
    <tr>
      <td>民族:</td>
      <td>
        <select name="aihao" size="1">
          <option value="0">汉族</option>
          <option value="1">壮族</option>
          <option value="2">维吾尔族</option>
          <option value="3">满族</option>
          <option value="4">高山族</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>兴趣爱好:</td>
      <td>
        <input type="checkbox" name="aihao" id="1" value="a"/>
          <label for="aihao">游泳</label>
        <input type="checkbox" name="aihao2" id="2" value="b"/>
          <label for="aihao2">篮球</label>
        <input type="checkbox" name="aihao3" id="3" value="c"/>
          <label for="aihao3">跑步</label>
      </td>

    </tr>
    <tr>
      <td>心动类型:</td>
      <td>
        <input type="checkbox" name="xindongleixing" value="" id="111" />
          <label for="xindongleixing">黑</label>
        <input type="checkbox" name="xindongleixing2" value="" id="222">
          <label for="xindongleixing2">长</label>
      </td>
    </tr>
    <tr>
      <td>其他</td>
      <td height="50px">
        <textarea name="234" id="aaa" cols="30" rows="4" placeholder="此项可不填"></textarea>

      </td>

    </tr>
    <tr>
      <td colspan="2">
        <input type="image" name="q" id="mm" src="2016-11-22_digitalliteracy_home.jpg" width="295px" height="100px">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" name="111" id="olf">
        <input type="reset" name="111" id="we">
      </td>

    </tr>

</table>

</td>

</tr>
</table>
</form>

 </body>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ThinkPHP框架的一些基础应用

下一篇:深度理解CSS样式表,内有彩蛋....