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>

效果如图:
在这里插入图片描述

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