一  <form>表单元素        

1  后边加 action    

  表示提交那个页面网址 ,用来定义表单处理程序的位置，其实也就是我们将表单送到哪里。    

 

2  后边加 method  

  表示提交方式 ，提交方式有两种：

  1）加get  是显示提交方式，有长度限制 

  2）加post  是隐藏式提交

  

3  enctype: 设置表单信息提交的编码方式，有以下几种

  1）TEXT/plain:以纯文本形式传递信息。

  2）Application/x-www-Form-urlencoded:默认的编码形式。 

  3）Multipart/Form-data:使用MINE编。

 

   4 target: 设置表单返回的窗口，target值有以下几种

 _blank:将返回信息显示在新开的浏览器窗口中

   _parent:将返回信息显示在父级浏览器窗口中 

 _self:将返回信息显示在当前浏览器窗口中

 _top:将返回信息显示在顶级浏览器窗口中

 

二 控件属性 

form 表单提交的信息是以 keyword : value 格式提交的，所以每个控件必然有两个属性，即 name，value。name为我们命名的控件名字，而value则是控件的值，一般输入框类的 value 是客户输入的值，而选择来控件，比如radio cnheckbox 的vlue值则是我们自己设置的，客户选择后传入的。

 

客户输入类型控件

1)  文本框：

  <input type=“text” > 

   1)  后加 placeholder加内容   平时显示鼠标移动到上方内容消失

   2)  后加maxlength                 表示最大可输入数

<input type="text" name="username" placeholder="请输入您的账号" >

 

 2)  多行文本域：

<textarea cols="列数" rows="排数" name="enter_textarea"></textarea>

 

3)  密码框： 

<input type="password" name="uesr_password" >

 

 4) 隐藏框：

<input type="hidden" name="" value="">

 

5)  地址框：

input type="url" id="url" name="url">

 

6)  E-mail 地址框：

<input type="email" id="email" name="email" multiple>

 

7)  密码框：

<input type="password" id="pwd" name="pwd">

 

 8) 电话号码栏：

<input type="tel" id="tel" name="tel">

 以上控件的 name 是我们来命名的 用来获取客户输入的内容即控件的 value 值。

 

 客户选择类型控件

 单选或多选用checked 表示默认选项      2)下拉列表用selected表示默认选项 ，多选的时候，多选里边 name 的名字必须一致，value  需要提前命名好，以便用户选择后电脑或者我们去获取用户选择的选项的值

 

1)  单选框：

input type="radio"  lable for加radio后id可增加用户体验  注意lable for后加的name的属性值与按钮 id相同
<input type="radio" name="" value="">
 1  <input type="radio"  name="r" id=“man”>
 2 
 3                                                                               
 4  <lable for=man>男</lable>
 5 
 6                                                                                
 7 <input type="radio"   name="r" id="woman">
 8 
 9                                                                               
10 <lable for="woman">女</lable>

正常情况，单选框都是提供几个选项，只能选择其中一个，name属性必须一致，value值是提前命名好的

 

2）多选框：

<input type="checkbox" name="" value="">

 

3) 下拉菜单

 select 标签表示下拉框 ，里边套 option 表示下拉框里边的选项 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <label for="weather">请选择天气类型:</label>
        <select id="weather">
            <option value="">--请选择--</option>
            <option value="sunny">晴天</option>
            <option value="rainy">雨天</option>
            <option value="snowing">雪天</option>
            <option value="overcast">多云</option>
        </select>
        <p id="para"></p>
    </body>
</html>
<script language="JavaScript1.1">
    var sec = document.querySelector("select");
    //获取下拉列表的属性 
    var para = document.querySelector("p").innerHTML;
    //获取段落文本 
    sec.addEventListener('change', shijian);
    //监听事件：当下拉列表的值改变时 ,调用函数shijian 
    function shijian() {
        var choice = sec.value
        //获取下拉列表选择属性的值，给p增加对应的显示文字。
        if (choice === 'sunny') {
            document.getElementById("para").innerHTML = "今天外面天气很好，阳光明媚。穿短裤！去海滩，或者公园，然后再买个冰淇淋，又是美好的一天啊"
        } else if (choice === 'rainy') {
            document.getElementById("para").innerHTML = "外面正在下着雨；带上雨衣和一条细枝，不要在外面呆太久。"
        } else if (choice === 'snowing') {
            document.getElementById("para").innerHTML = "下雪了--好冷啊！最好还是和一杯热巧克力待在一起，或者去堆雪人也不错。"
        } else if (choice === 'overcast') {
            document.getElementById("para").innerHTML = "天没有下雨，但天空灰暗，随时可能转晴，所以就拿一件雨衣来吧"
        } else {
            document.getElementById("para").innerHTML = "没有选择，所以我们无法判断您要干什么."
        }
    }
</script>

 

 

 

4)重置输入框：

<input type="reset">

这几种情况下name/value由开发命名，在页面中并不显示，用于暂存某些信息，可用于某些安全方面的设置。

 

5)自动补全输入框：

 

您可以使用<datalist>元素来为表单小部件提供建议的、自动完成的值，并使用一些<option>子元素来指定要显示的值。

 

然后使用list属性将数据列表绑定到一个文本框(通常是一个 <input> 元素)。

 

一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本;通常，这是作为一个下拉框提供给用户的，匹配在输入框中输入了的内容。

 1 <label for="myFruit">What's your favorite fruit?</label>
 2 <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
 3 <datalist id="mySuggestion">
 4   <option>Apple</option>
 5   <option>Banana</option>
 6   <option>Blackberry</option>
 7   <option>Blueberry</option>
 8   <option>Lemon</option>
 9   <option>Lychee</option>
10   <option>Peach</option>
11   <option>Pear</option>
12 </datalist>