一 <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>