1、表单
- 表单控件
- 提示信息
- 表单域
<form>之间的内容</form>
2、<input />类型
W3CSchool练习地址
type：说明属于哪种表单
-
text：单行文本框
-
password：密码输入框，浏览器会将输入内容变成*******
-
button：
<input>标签会渲染成一个按钮<input type="button" value="提交"/>
-
radio：定义单选按钮。如果是一组，name必须一致。
<input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female
-
checkbox：定义复选按钮，如果是一组，name必须一致。
<input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car
-
submit：定义提交表单数据至表单处理程序的按钮，默认get方式。使用method设置提交表单时所用的 HTTP 方法，在
<form action="" method="GET">。使用 GET 时，表单数据在页面地址栏中是可见的，且GET 最适合少量数据的提交，因为浏览器会设定url长度限制。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的（使用GET，会暴露password）。<form> ······ <input type="submit" value="submit"> </form>
-
reset：点击后，重置整个表单，回到默认现状。
-
image：设置input表现为image。
-
file：上传文件。
3、<input />属性
name：控件名称，不会渲染到页面，可以与<label>标签匹配，以及单选框与多选框。
value：控件中的默认文本值，会渲染到页面
size：控件的显示宽度，通常使用css控制。
checked：定义被选中的项，用于单选框和多选框。只要标签上有这个属性，就可以。不需要值，这样checked="false"，demo.disabled也是true。
disabed：只要标签上有这个属性，就可以。不需要值，同上。被禁用的元素不会被提交。
readonly ：属性规定输入字段为只读（不能修改）。不需要值。
4、HTML5 为 <input>增加的属性
autocomplete：属性规定表单或输入字段是否应该自动补充完成，值为on或off。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。适用于 <input>类型：text、search、url、tel、email、password···
autofocus：属性是布尔属性。如果设置，则规定当页面加载时<input>元素应该自动获得焦点。
form：form 属性规定 元素所属的一个或多个表单。输入字段位于 HTML 表单之外（但仍属表单）。
height 和 width ： 属性仅用于 <input type="image">。请始终规定图像的尺寸，如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。
list ：属性与<datalist>结合使用， <datalist>元素中包含了 <input>元素的预定义选项。具体见Form标签 <datalist>
multiple ：属性是布尔属性，规定允许用户在 <input>元素中输入一个以上的值，适用于以下输入类型：email 和 file。
placeholder ：规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述），适用于以下输入类型：text、search、url、tel、email 以及 password。
required ：属性是布尔属性，规定在提交表单之前必须填写输入字段。
step、max 和min：创建合法值的范围。
<input type="number" name="points" step="3" min="0" max="9" value="0"/>
5、原生JS获取表单Value
-
获取单选框value
<form name="myFormBox"> sex:<br> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form> document.forms["myFormBox"]["sex"].value; //Male 或 document.getElementsByName("sex")[0].value; //Male -
获取复选框value
<form name="myFormBox"> favorite vehicle:<br /> <input type="checkbox" name="favorite" value="Bike" checked />bike <br /> <input type="checkbox" name="favorite" value="Car" checked />car <br /> <input type="checkbox" name="favorite" value="Subway" />subway </form> var x = document.getElementsByName("favorite"); // var x = document.forms["myFormBox"]["favorite"]; var i = 0; while(x[i]){ if(x[i].checked){ result+=" " + x[i].value; } i++; } console.log(result); //Bike Car
<!DOCTYPE html>
<html>
<body>
<form name="myFormBox">
username:<br />
<input type="text" name="username" value="Mickey" />
<br />
password:<br />
<input type="password" name="password" value="123456" />
<br />
sex:<br />
<input type="radio" name="sex" value="male" checked />Male
<br />
<input type="radio" name="sex" value="female" />Female
<br />
favorite vehicle:<br />
<input type="checkbox" name="favorite" value="Bike" checked />bike
<br />
<input type="checkbox" name="favorite" value="Car" checked />car
<br />
<input type="checkbox" name="favorite" value="Subway" />subway
<br /><br />
<input type="button" value="Submit" id="submit" />
</form>
<p id="result">如果您点击提交，表单数据会替换这里。</p>
</body>
<script>
var submit = document.getElementById("submit");
var result = "";
submit.addEventListener("click", function(){
var x = document.forms["myFormBox"]["favorite"];
var i = 0;
while(x[i]){
if(x[i].checked){
result+=" " + x[i].value;
}
i++;
}
document.getElementById("result").innerHTML = result;
});
</script>
</html>
6、其他表单元素
-
<label>标签，为<input>元素定义标注，使点击文本标记，就可以触发相关控件。可以通过name和id定位到目标控件。<label for="male">Male</label> // 通过name <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> // 通过id <input type="radio" name="sex" id="female" /> -
<select>元素定义下拉列表,列表通常会把首个option 选项显示为被选选项，可以通过添加 selected 属性来定义预定义选项。<select name="cars"> <option value="volvo">Volvo</option> <option value="saab" selected >Saab</option> // selected <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <input type="button" id="submit" value="提交"> <script> var submit = document.getElementById("submit"); var demo = document.getElementsByName("cars"); submit.addEventListener("click", function(){ console.log(demo[0].value); }); 或 var demo = document.forms["formBox"]["cars"]; submit.addEventListener("click", function(){ console.log(demo.value); }); </script>
-
<textarea>元素定义多行输入字段（文本域），不支持富文本。 -
<button>元素定义可点击的按钮，其实其他标签也可以这样定义点击。<button type="button" onclick="alert('Hello World!')">Click Me!</button> 或 <input type="button" onclick="alert('Hello World!')" value="点击我！"></input>
7、HTML5 新增表单元素
- keygen: 密钥对生成器,当提交表单时，会生成两个键，一个是私钥，一个公钥。浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
- output： 用于不同类型的输出，比如计算或脚本输出。
<datalist>设置<input>预定义值的元素<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
