yperscirpt-rxjs之表單輸入

表單輸入元素用了一些新的名稱，名稱遵守元素名稱全小寫的約定。

本文及示例代碼都在github上，見xp44mm/hyperscript-rxjs-test倉庫。

運行示例代碼的方法，見第0章，框架的創建。

文本框（textbox）

import { div, textbox, textNode } from 'hyperscript-rxjs'
import { BehaviorSubject } from 'rxjs'

export function forms() {
    let message=new BehaviorSubject('')
    return div(
        textbox({ value: message, placeholder: 'edit me' }),
        div('Message is: ', textNode(message))
    )
}

文本框返回的是input元素。

多行文本（textarea）

import { br, p, span, textarea, textNode } from 'hyperscript-rxjs'
import { BehaviorSubject } from 'rxjs'

export function forms() {
    let message=new BehaviorSubject('')
    message.subscribe(console.log)

    return [
        span("Multiline message is:"),
        p({
            'style.whiteSpace': "pre-line",
        }, textNode(message)),
        br(),
        textarea({
            value: message,
            placeholder: "add multiple lines",
        }),
    ]
}

復選框（checkbox）

單個復選框，綁定到布爾值。

import { textNode, checkbox, label } from 'hyperscript-rxjs'
import { BehaviorSubject } from 'rxjs'

export function forms() {
    let checked=new BehaviorSubject(true)
    checked.subscribe(console.log)

    return [
        checkbox({
            id: "checkbox",
            checked,
        }),
        label({
            htmlFor: "checkbox",
        }, textNode(checked)),
    ]
}

多個復選框，綁定到同一個數組：

export function forms() {
    let checkedNames=[] //*1

    let jack=new BehaviorSubject(false) //*2
    let john=new BehaviorSubject(false)
    let mike=new BehaviorSubject(false)

    let result=//*3
        merge(
            jack |> map(x=> [x, 'Jack']),
            john |> map(x=> [x, 'John']),
            mike |> map(x=> [x, 'Mike']),
        )
        |> tap(([ck, name])=> { //*4
            if (ck) {
                checkedNames.push(name)
            } else {
                let i=checkedNames.findIndex(nm=> nm===name)
                checkedNames.splice(i, 1)
            }
        })

    return [
        checkbox({
            id: "jack",
            value: "Jack", //*5
            checked: jack,
        }),
        label({
            htmlFor: "jack",
        }, "Jack"),
        checkbox({
            id: "john",
            value: "John",
            checked: john,
        }),
        label({
            htmlFor: "john",
        }, "John"),
        checkbox({
            id: "mike",
            value: "Mike",
            checked: mike,
        }),
        label({
            htmlFor: "mike",
        }, "Mike"),

        br(),

        div(
            "Checked names: ",
            textNode( //*6
                result
                |> mergeMap(()=> of(checkedNames.join(',')))
            ),
        )
    ]
}

1. 聲明后臺數組。
2. 聲明三個checkbox的checked后臺數據。
3. 把三個checkbox統一數據形式，合并成一個數據管道。用tap可以確保先修改后臺數據，然后再呈現到DOM。
4. 如果選中，把名字加入數組，如果反選，把名字從數組中去掉。
5. checkbox控件的value屬性是可以不設置的，不影響程序的功能。
6. 每次有改變信號時，都要重新讀取后臺數組。

單選按鈕（radio）

import { br, div, label, radio, span, textNode } from 'hyperscript-rxjs'
import { BehaviorSubject, merge } from 'rxjs'
import { filter, map } from 'rxjs/operators'

export function forms() {
    let one=new BehaviorSubject(true)
    let two=new BehaviorSubject(false)

    let picked=       merge(
            one |> map(x=> [x, 'One']),
            two |> map(x=> [x, 'Two']),
        )
        |> filter(([ck])=> ck)
        |> map(([ck, name])=> name)

    return div({
        id: "example-4",
    }, [
        radio({ id: "one", value: "One", checked: one, name: "drone" }),
        label({ htmlFor: "one", }, "One"),
        br(),
        radio({ id: "two", value: "Two", checked: two, name: "drone" }),
        label({ htmlFor: "two", }, "Two"),
        br(),
        span("Picked: "), textNode(picked)
    ])
}

選擇框（select）

單選綁定值：

import { option, select, span, textNode } from 'hyperscript-rxjs'
import { BehaviorSubject } from 'rxjs'

export function forms() {
    let value=new BehaviorSubject('')

    return [
        select({
            value
        }, [
            option({ disabled: true, value: "", }, "please select"),
            option("A"),
            option("B"),
            option("C"),
        ]),
        span("Selected: "), textNode(value)
    ]
}

單選綁定索引：

function selectforms() {
    let selectedIndex=new BehaviorSubject(0)

    return [
        select({
            selectedIndex
        }, [
            option({ disabled: true, value: "", }, "please select"),
            option("A"),
            option("B"),
            option("C"),
        ]),
        span("Selected: "), textNode(selectedIndex)
    ]
}

多選時：

import { div, hyperscript, option, span, textNode } from 'hyperscript-rxjs'
import { BehaviorSubject } from 'rxjs'

export function forms() {
    let a=new BehaviorSubject(false)
    let b=new BehaviorSubject(false)
    let c=new BehaviorSubject(false)

    return [
        hyperscript('select', {
            multiple: true, style: "width: 50px;"
        }, [
            option({ selected: a }, "A"),
            option({ selected: b }, "B"),
            option({ selected: c }, "C"),
        ]).subscribeEvent('input', e=> {
            let ss=e.target
            let aa=ss[0].selected
            let bb=ss[1].selected
            let cc=ss[2].selected

            if (a.value !==aa) a.next(aa)
            if (b.value !==bb) b.next(bb)
            if (c.value !==cc) c.next(cc)
        }),
        div(
            span("Selected: "),
            textNode(a),
            textNode(b),
            textNode(c),
        )
    ]
}

數值輸入框（numberbox）

html沒有輸入number的控件，我們簡單用textbox包裝了一個：

import { BehaviorSubject } from 'rxjs'
import { numberbox } from 'hyperscript-rxjs'

export const numberboxTest=()=> {
    let number=new BehaviorSubject(0)
    number.subscribe(console.log)
    return numberbox({ number })
}

說明numberbox控件直接綁定模型數據是number類型的，而不像textbox控件是string類型的?？丶嶋H是input元素，增加了一個自定義的屬性number保存當前值。當控件失去焦點時，更新模型的數據值。可以打開控制臺已測試模型數據的輸出。

單元素屬性2

為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學有所成！吸引人的東西未必珍貴。

昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》（目錄在結尾），大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續學習新的表單內容。

建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調頻旋鈕是對應角度對應相應調頻，不可能一個角度對應兩個調頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。

示例代碼如下：

<form>
  最高學歷：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>碩士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  <input type="submit" value="submit"/>
</form>

因為描寫的是最高學歷，一般人最高學歷只有一個，不可能又是學士又是博士，因此使用單選表單。

向服務器提交時，name叫做"education"（教育），value對應不同層次。

頁面效果如下：

大家可以點點試試，每次只能有一個被選中。如圖：

綜合練習：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>表單 </title>
  </head> 
  <body>
  <form>
  會員名稱：
  <input type="text" placeholder="請輸入英文或漢語拼音" name="memberName"/><br>
  會員密碼：
  <input type="text" placeholder="請輸入英文字母、特殊符號、數字" name="passWord"/><br>
  確認密碼：
  <input type="text" name="confirmPassWord"/><br>
  <input type="submit" value="提交"/><br>
  </form>
  <hr>
  <form>
  興趣愛好：
  <br>
  <input type="checkbox" name="hobby" value="reading"/>讀書
  <input type="checkbox" name="hobby" value="film"/>電影
  <input type="checkbox" name="hobby" value="painting"/>繪畫
  <input type="checkbox" name="hobby" value="music"/>音樂
  <br>
  最高學歷：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>碩士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  <input type="submit" value="submit"/>
  </form>
  </body>
  </html>

頁面效果如下：

密碼輸入：我們在使用上述表單輸入密碼時發現，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：

如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：

會員密碼：
<input type="password" placeholder="請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type="password" name="confirmPassWord"/><br>

頁面效果如下：

上傳文件：使用type="file"可以上傳文件！

示例代碼如下：寫在"submit"的上面即可。

<input type="file"/><br><input type="submit" value="submit"/>

頁面效果如下：

點擊"瀏覽"看下效果：

神奇！

使用圖片制作按鈕：將type="image"即可，代碼如下：

<input type="image" src="img/示例圖片/submit.jpg"/><br>

頁面效果如下：用一個src導入圖片即可。

示例圖片：路徑自行設置即可！

為表單設置一個重置按鈕：如果用戶打算重置表單內容后從新填寫，我們可以給他這樣一個按鈕：

<input type="reset" /><br>

頁面如圖所示：

大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！

舉個例子，如圖：

下面我們點擊"重置"后效果如下：

form1中的內容沒有被清空，"重置"按鈕所在的form2內容被清空了！

type屬性值講解我們到此結束了，hidden值這里先不給大家介紹，以后有機會再細說。

button值以后在JavaScript部分還會細說，這里也先略過。

除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學習吧！

今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。

碎片化的知識其實對人并沒有多大作用，但是我們的時間在現代化的生活節奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學習完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成！

喜歡我的教程的小伙伴請關注我，點贊也會讓我充滿動力！

喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作