HTML基础——表单form

最新推荐文章于 2024-11-14 00:00:11 发布

陵先生的笔记本

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量231

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/qq_43433860/article/details/103818701

版权

前端基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

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