码迷,mamicode.com
首页 > 其他好文 > 详细

表单的用法

时间:2019-01-12 10:32:07      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:read   关于   薛之谦   sel   from   --   Enctype   idt   style   

    表单标签:form     method=“提交方式”

        表单作用:提交表单元素的值到后台进行处理

        表单元素:属性:name(键)   value(值)  非常重要     

<form action="提交地址" method="提交方式"> </form>

          1、文本类型

                文本框     text

                    不可操作  disable

                    只读     readonly

                    默认提示文字   placeholder

                密码框     password

                隐藏域     hidden

                <span style=”color:red”>

                多行文本   textarea通用格式的表单元素就是标签内一个属性的值

                 </span>

          2、选择类型  label

                单选     radio

                  不可操作  disable

                  默认选中   checked

                多选     checkbox

                   默认选中  checked

                下拉     seletion

                  下拉框的值就是option里面的value值

                   Value值不写 就是option的内容

          3、按钮类型

                普通     button

                提交     submit

                复位     reset

      其他:

          4、文件类型

             Enctype=

          5、图片类型

     通用格式

         &lt <input type="类型" name="" value=""

         &gt;

    特殊格式

    多行文本

        &lt;textarea  name=""  id="" &gt;

        &lt;/textarea&gt;

         文本框

          下拉框

           选择

           按钮

只在form表单中起作用

技术分享图片

关于各类标签用法简单的举个栗子:

----------------------------------------------------------------------------------------------举个栗子-------------------------------------------------------------------------------------------------------------------------------------

1、 密码字段:用password定义

<form>
Password:< input type="password" name="pwd">
< /form>

 

运行结果:

技术分享图片

2、下拉列表:

技术分享图片
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
技术分享图片

 

运行结果:

技术分享图片

-----------------------------------------------------------------------------------------------栗子举完了-----------------------------------------------------------------------------------------------------------------------------

 当当当当!还有个小练习!

技术分享图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网易账号中心</title>
</head>

<body>
     <table align="center" cellpadding="5" >
         <tr>
          <td ><input type="button" value="普通账号注册" style="width: 200px;height: 50px">
          <a href="https://haoma.163.com/?from=zcb" target="_blank"><input type="button" value="靓号注册" style="width: 200px;height: 50px"></a> <br><br>
        <!--&ensp;&ensp;&ensp;&ensp;-->账号:<input type="text" value="">
        <select name="" id="">
        <option value="">@163.com</option>
         <option value="">@162.com</option>
         <option value="">@yeah.net</option>
         </select><br><br>
         <!--&ensp;&ensp;&ensp;&ensp;-->密码:<input type="password"><br><br>
        确认密码:<input type="text"><br><br>
        <!--&ensp;&ensp;-->验证码:<img src="QQ图片20180605104713.png"  width="50%" alt="112"><br><br>
        <!--&ensp;&ensp;&ensp;-->手机号:<input type="text" value="11位手机号"><br><br>
       短信验证码:<input type="text" value="输入短信验证码">
       <input type="button" value="获取验证码"><br>
       <a href="http://reg.163.com/Main.jsp;jsessionid=abcw4w5pmroxF8SfTeopw" target="_blank"><input type="button" value="注册"></a><br><br>
      <input type="button" value="v">用户勾选即代表同意《网易邮箱服务条款》和《网易隐私政策》
        </td>
         </tr>
     </table>

</body>
</html>
技术分享图片

 

运行结果:

技术分享图片

optgroup分组:

技术分享图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
  <select name="#" id="post">
      <optgroup label="Swedish Cars">  
          <option value="薛之谦">Volvo</option>
           <option value="李荣浩">Saab</option>
      </optgroup>
       <optgroup label="German Cars">
              <option value="暧昧">Mercedes</option>
            <option value="裙姊">Audi</option>
          </optgroup>
        </select>
    </body>
</html>
技术分享图片

 

运行结果:

技术分享图片

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。

技术分享图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<form>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第一:<input type="text" name="wo"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni" autofocus style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    第二:<input type="text" name="ni"><br>
    <input type="submit">
</form>
</body>
</html>
技术分享图片

 

 

 运行结果

 技术分享图片

 

表单的用法

标签:read   关于   薛之谦   sel   from   --   Enctype   idt   style   

原文地址:https://www.cnblogs.com/qq1312583369/p/10258425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!