• HTML&javaSkcript&CSS&jQuery&ajax(六)


    一、HTML表单

       1、<input type="text">定义文本输入的单上输入字段,<form> First name:<br>   <input type="text" name="firstname">  <br>  Last name: <br><input type="text" name="lastname"></form>

       2、单选按钮输入   <input type="radio">   eg、 <form>  <input type="radio" name="sex" value="male" checked>Male<br>

                                     <input type="radio" name="sex" value="female"> Female

     3、提交按钮,<input type="submit">    表单处理程序在action属性中指定。eg、<form action ="action_page.php">

                          first name:<br>   <input type="text" name="firstname" value="Mouse"><br>

                          Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Mouse"></form>

      4、Method 属性规定提交表单的时候使用的HTTP 方法(get或者post)

            <form action="action_page.php method="GET">     <form action="action_page.php method="POST">

             如果要正确的提交每个字段必须设置一个name属性, <fieldset></fieldset>组合表单数据

       5、下拉列表<select>元素标签   eg、  <select name="cars">

    <option value="volvo">Volvo</option>   <option value="saab">Saab</option>   <option value="fait">Fait</option>  <option value="auid"> Auid</option>

    </select>

         添加预定义选项    <option value="failt" selected>Failt</option>

       6、 textarea 元素定义多行输入字段(文本域)   <textarea name="message" rows="10" cols="30">    The cat was playing in the garden.</textarea>

       7、<button>元素标签,点击的按钮<button type="button" onclick="alert("Hello world")>Click here</button>

        8、Html5 <datalist>元素标签,<input>元素list 属性必须引用<datalist>元素的ID属性

              <form action="action_page.php"><input list="browsers"><datalist id="browsers">

             <option value="Firefox“>   <option value="Chrome">   <option value="Opera">

        </datalist> </form>

        9、 输入类型password   <input type="password"> 定义密码字段

                 <form > User name:<br><input type="test" name="username"><br>

                               User password :<br>   <input type="password" name=" psw"></form>

      10、表单处理 <submit>标签   <form action="action_page.php">         <input type="submit" value="Submit"></form>

            单选按钮    <input type="checkbox" name="vehicle" value="Bike">Ihave a bike<br>  <input type="checkbox" name="vehicle" value="Car">I have a car</form>

       11、输入类型 number  <input type=":number">能过对数字进行限制

               <form>  Quantity(between 1 and 5):   <input type="nmber"  name="quantity" min="1"   max="5"></form> 

              限制输入 <form >   Quantity:   <input type="number" name="potions" min="0"  max="100" step="10" value=”30‘’></form>

              输入日期类型  Date  <input   type="date" >  

                                        <form> Birthday:    <input  type="date" name="bday"></form>

               12、Value属性规定初始值      eg、  <form action="" > First name:<br>   <input type="text" name=firstname" value=John"><br>

                 readonly  属性规定输入字段的我只读输入,不能修改eg、   <input  type="text"   name="firstname"   value="John"  readonly> 

                13、disabled 属性 规定输入西段是禁用的  eg、<input type="text" name="firstname" value="John": disabled>   也就是说 这个John提交不了

                     size 规定输入字段的尺寸,<input type="text:"  nbame="firstname"  value="John" size="30">

                    maxlength 规定输入字段的最大长度,   <input type="text”   name="firstname" maxlength="10">

         14、 autocomplete属性规定表单输入字段是否应该自动完成, 可以把表单的autocomplete 设置成on   或者off   

                  <form action="action_page.php"  autocompete="on">  Firstname:<input type="text"  name="fname"><br>

                   E-mail: <input type="email" name="email"   autocompete="off"><br><input type="submit”></form>

                

  • 相关阅读:
    Alpha冲刺(1/4)
    团队项目用户验收评审
    beta冲刺 第四天
    beta冲刺 第三天
    Beta冲刺 第二天
    Beta冲刺 第一天
    实验十一 团队作业7---团队项目设计完善&编码测试
    Alpha冲刺四
    Alpha冲刺
    《Miracle_House》团队项目系统设计改进
  • 原文地址:https://www.cnblogs.com/xinxianquan/p/8470741.html
Copyright © 2020-2023  润新知