HTML基礎——表單form

form表單標籤——開始一個表單

屬性設置:
method = (post, get )
action = JavaScript或者URL或者一個servelt(表單的提交目標地址)
name = 表單名字

input——收集用戶輸入內容

屬性設置:
type = (text , password, submit , reset , button , radio, checkbox , image, file , hidden)中的某一種

text:文字
password:密碼(輸入時只顯示黑點)
submit:提交按鈕(提交整個FORM表單的信息到磨標地址)
button :按鈕,不常用
reset:清空所填寫的所有內容
radio:單選框(需要使用同一個name)
checkbox:多選框(需要使用同一個name)
image:圖片按鈕(不常用)
file:上傳文件的按鈕
name=這個輸入所屬的名字
value=輸入的默認值

Select 下拉選擇框

屬性設置
name: 下拉選擇框的名字
size: 下拉選擇框的大小
title: 下拉選擇框的提示信息
width: 下拉選擇框的寬度
selected默認選中的值
value: form提交時下拉選擇框返回給服務器的值

select與option 必須結合使用

使用方式:

<option value=”選中此項時提交給服務器的值” >顯示的值</ option >

textArea 文檔區域

屬性設置:
name: 文本區域的名字
rows: 文本區域的行數
cols: 文本區域的列數
title: 文本區域的提示信息

一個例子(form與table一起使用):

<body>
    <form action="#" target="_blank" method="post">
        <table width="50%" align="center" border="1" cellspacing="0">
            <tr align="center" bgcolor="#2BD5D5">
                <td></td>
                <td>序號</td>
                <td>姓名</td>
                <td>性別</td>
                <td>部門</td>
                <td>崗位</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" align="center" name="person" value="1">
                </td>
                <td>1</td>
                <td>
                    <input type="text" name="name" align="center" placeholder="請輸入名字">
                </td>
                <td>
                    <input type="radio" name="sex1" value="m">男
                    <input type="radio" name="sex1" value="w">女
                </td>

                <td>
                    <select name="bumen1">
                        <option>請選擇部門</option>
                        <option>財務部</option>
                        <option>項目部</option>
                        <option>營銷部</option>
                    </select>
                </td><td>
                    <select name="gangwei1">
                        <option>請選擇崗位</option>
                        <option>主管</option>
                        <option>經理</option>
                        <option>業務員</option>
                    </select>
            </tr>
            <tr>
                <td align="center" colspan="6">
                    <input type="submit" value="登錄">
                </td>
            </tr>
        </table>
    </form>
</body>

效果如圖:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章