HTML --表單和輸入

時間 2019-11-10

標籤 html 表單輸入欄目 HTML 简体版

原文原文鏈接

表單的做用是蒐集不一樣類型的輸入信息
html

表單是一個包含表單元素的區域瀏覽器

表單元素容許用戶在表單中(eg:文本輸入框、下拉列表、單選/複選框)作出一些動做。ui

表單使用表單標籤訂義code

<form>
......
    input 元素
......
</form>

輸入orm

輸入標籤(<input>)是用在表單中最多的標籤，輸入類型是由類型屬性(type)定義的。經常使用的類型以下htm

1.文本域(Text Fields)
utf-8

當用戶要在表單中輸入字母、數字或是漢字等內容時，就會用到文本域。get

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form>
        name:
        <input type="text" name="name" />
        <br />
        <br />
        gender:
        <input type="text" name="gender"/>
    </form>
</body>
</html>

2.單選按鈕(Radio Buttons)input

當用戶從若干選項中選取其中之一時，就會用到單選框。
it

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form>
        <input type="radio" name="choice" value="A" />A
        <br />
        <input type="radio" name="choice" value="B" />B
        <br />
        <input type="radio" name="choice" value="C" />C
        <br />
        <input type="radio" name="choice" value="D" />D
    </form>
</body>
</html>

3.複選框(Checkboxes)

當用戶須要從若干給定的選擇中選取一個或多個選項時，會用到複選框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form>
        <input type="checkbox" name="choiceA" value="A" />A
        <br />
        <input type="checkbox" name="choiceB" value="B" />B
        <br />
        <input type="checkbox" name="choiceC" value="C" />C
        <br />
        <input type="checkbox" name="choiceD" value="D" />D
    </form>
</body>
</html>

4.表單的動做屬性(Action)和確認按鈕

用戶點擊確認按鈕時，表單的內容會被保存起來或是傳到另外一處，表單的動做屬性定義了目的文件的文件名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <form name="input" action="跳轉的頁面" method="get">
        <input type="checkbox" name="choiceA" value="A" />A
        <input type="submit" value="submit" />
    </form>
</body>
</html>

5.下拉列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <select name="cars">
        <option value="fukesi">福克斯</option>
        <option value="gaoerfu">高爾夫</option>
        <!-- selected屬性代表哪一個下拉選項被選中-->
        <option value="hafu" selected="selected">哈弗</option>
        <option value="angkesaila">昂克賽拉</option>
    </select>
</body>
</html>

6.建立按鈕

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <input type="button" value="click" />
</body>
</html>

7.組合表單內相關元素

fieldset元素能夠將表單內的相關元素分組，當一組表單元素被放到<fieldset>標籤內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <fieldset>
        <legend>張三</legend>
        姓名:<input type="text" />
        <br />
        性別:<input type="text" />
        <br />
        <input type="submit" value="Submit" />
    </fieldset>
</body>
</html>

8.定義選項組

能夠經過<optgroup>標籤將相關的選項組合在一塊兒

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <select>
    <optgroup label="fute">
        <option value="fukesi">福克斯</option>
        <option value="furuisi">福睿斯</option>
    </optgroup>
    <optgroup label="mazida">
        <option value="mazida6">馬自達6</option>
        <option value="angkesaila">昂克賽拉</option>
    </optgroup>
    <optgroup label="dazhong">
        <option value="polo">菠蘿</option>
        <option value="gaoerfu">高爾夫</option>
        <option value="baolai">寶來</option>
    </optgroup>
    </select>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。