表单的简单操做

时间  2019-12-12
标签 表单 简单 栏目 HTML 繁體版
原文   原文链接

表单操做

获取表单元素

document对象提供了一系列的定位页面元素能够通 getElementById ,getElementByName,getElementByTagname,getElementByClassName等方法获取表单元素。同时document对象提供了form属性能够获取表单集合以下代码所示
`<!DOCTYPE html>
<html lang="en">
<head>html

<meta charset="UTF-8">
<title>获取表达元素</title>

</head>
<body>
<form action="#"><input type="submit"><!--//建立一个form表单-->
<!--建立一个输入按钮-->code

</form>
<form name="myform" action="#"><!--//输入框name=myform-->orm

<input type="submit"><!---->建立一个输入按钮

</form>
<script>htm

console.log(document.forms);/*打印表格经过form属性 通常使用这个方式*/
console.log(document.myform)/*经过name 名字直接打印 不经常使用*/

</script>
</body>
</html>`对象

获取表单组件元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取表单组件元素</title>
</head>
<body>
<form action="#">
    <input type="text" name="username"><!--建立一个输入框name=username-->
    <input type="submit"> <!--建立一个按钮-->
</form>
<script>
    var form =document.forms [0];
    console.log(form.elements);
</script>
</body>
</html>

获取文本组件元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本内容的选择</title>
</head>
<body>
<form action="#"
</form>
<script>
    //HTMLinputElement对象
var username =document.getElementById('username');
//绑定获取焦点（focus）事件-失去焦点（blur）事件
    username.addEventListener('focus',function () {
        //select(方法)-选择当前输入框中的全部文本内容（全选）
        //username.select();

    })
    /*
    * selects事件
    * 只要选择对应元素的文本内容时被触发
    * select（）方法*/
    username.addEventListener('select',function(){
        /*
        * HTMLinputElement对象
        * selectioStart-表示用户选中文本内容的开始索引值
        * selectionEnd- 表示用户选中文本内容的结束索引值的下一个值*/
        console.log(username.selectionStart,username.selectionEnd);
        var value =username.getAttribute('value');
        var result =value.substring
        (username.selectionStart,username.selectionEnd);
        console.log(result);
    })
</script>
</body>
</html>

设置文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置文本内容</title>
</head>
<body>
<form action="#">
    <input type="text"id="username" value="请输入你的用户名">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    var username =form.elements[0];
    username.addEventListener('focus',function () {
        username.setSelectionRange(0,5);
    })
</script>
</body>
</html>

下拉表操做

<!DOCTYPE html>
<html lang="en">
<head>索引

<meta charset="UTF-8">
<title>下拉列表操做</title>

</head>
<body>
<form action="#">事件

<select id="city">
    <option id="bj" value="bj">北京</option>
    <option value="nj">南京</option>
    <option value="tj">天津</option>
</select>
<select id="city2" multiple size="5">
    <option value="bj">北京</option>
    <option value="nj">南京</option>
    <option value="tj">天津</option>
</select>

</form>
<script>ip

// HTMLSelectElement对象
var city = document.getElementById('city');
// 属性
console.log(city.length);
console.log(city.options);
console.log(city.selectedIndex);// 被选中<option>的索引值

var city2 = document.getElementById('city2');
// size属性默认值为 0
console.log(city2.size);

console.log(city2.item(1));
city2.remove(2);

var bj = document.getElementById('bj');
console.log(bj.index);
console.log(bj.selected);
console.log(bj.text);
console.log(bj.value);

</script>
</body>
</html>ci

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程