1. 程式人生 > >HTML學習之表單

HTML學習之表單

20170528_表單學習

今天學習的是關於表單的部分,記下自己的學習進度,留下自己學習痕跡。

<from></from>建立表單所有表單內容都寫在這裡面

<input/>建立文欄位,單/複選框,按鈕等等

<h3>密碼框</h3>

<labelfor="pwd">密碼</label>
<inputid="pwd"name="pwd"type="password"value="1"maxlength="6">

文字框和密碼框寫法基本一致。

Lable :指表單控制元件獲得焦點

Lable 裡的for=” ”input裡的

id=” ”要相等

Maxlength=”n”表示最大輸入個數為n

Checked 表示預設選擇項

Value=”n” 表示被選項向伺服器返回的值為n;

Type 指定元素的型別:text,password,checkbox,radio,file....

<select></select>建立下拉列表

Size 選項的數目,multiple可選擇多個選項

Value 選項的值,selected預設選項

<selectname="Book"size="1">
    <optionvalue="1">歷史</option>
    <

optionvalue="2">文學</option>
    <optionvalue="3"selected="selected">小說</option>
</select>

<textrea></textrea>定義多行文字區

Cols 文字區可見寬度,rows文字區可見行數,

Disabled 禁用該文字 ,readonly文字區為只讀  

<h3>多行文字域</h3>
<textareaname="火影"cols="30"rows="5"readonly="readonly">這是一個忍者的世界,並不是我們所認為的黑暗,而是充滿著陽光與希望!火影裡帶給我最多的就是感動,更是讓我知道了有一種名為努力型的天才!


</textarea>

 自己做的關於表單的練習:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單的使用</title>
</head>
<body>
    <form>
        <h3>文字框</h3>
        <!--for和id的值要相等-->
        <label for="name">姓名:</label>
        <!--maxlength表示最大輸入個數為6個-->
        <input id="name" name="name" type="text" value="請輸入姓名" maxlength="6">
        <h3>密碼框</h3>
        <label for="pwd">密碼</label>
        <input id="pwd" name="pwd" type="password" value="1" maxlength="6">
        <h3>複選框</h3>
        <!--checked表示預設的一項-->
        <input name="Subject" type="checkbox" value="1" checked="checked"> HTML
        <input name="Subject" type="checkbox" value="1" > Css
        <input name="Subject" type="checkbox" value="1" > Java
        <h3>單項按鈕</h3>
        <input name="sex" type="radio" value="male" checked="checked">男
        <input name="sex" type="radio" value="female">女
        <h3>檔案域</h3>
        請選擇檔案:<input name="file" type="file">
        <h3>按鈕</h3>
        <input type="button" value="普通按鈕"><br>
        <input type="submit" value="提交按鈕"><br>
        <input type="reset" value="重置按鈕">
        <p>最後來個圖片按鈕</p>
        <input type="image" value="" src="images/timg.gif" width="50px" height="50px">
        <h3>下拉列表</h3>
        <select name="Book" size="1" >
            <option value="1">歷史</option>
            <option value="2">文學</option>
            <option value="3"selected="selected">小說</option>
        </select>
        <h3>多行文字域</h3>
        <textarea name="火影" cols="30" rows="5" readonly="readonly">這是一個忍者的世界,並不是我們所認為的黑暗,而是充滿著陽光與希望!火影裡帶給我最多的就是感動,更是讓我知道了有一種名為努力型的天才!
        </textarea>
    </form>
</body>
</html>