表單的簡單操做

時間  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教程