HTML简单入门 - 表单

最新推荐文章于 2023-02-24 23:36:57 发布

酱紫学Java

最新推荐文章于 2023-02-24 23:36:57 发布

阅读量197

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52519008/article/details/122124499

版权

form 常用属性

 <form action="提交的后台路径" method="提交方式">
        姓名:<input type="text" name="userName"/><br/>
        <input type="submit" value="注册"/>
    </form>

表单作用：用来收集用户信息，对应标签是<form>

action:提交的用来接收数据的后台路径

method:设置提交方式，常用两个值 ,get和post

get和post提交有什么区别：

get提交会把提交信息在地址栏中显示出来，post不会显示提交信息
get提交最多能提交127k大小的数据，post对提交文件大小没有限止
get一般用于查询操作，post一般用于上传，注册

表单中常用标签

input

<input type="text" name="userName"/>

其中type选值有： text（文本）,radio（单选）,password（密码）,checkbox（多选） ,submit（提交）,reset（充值）,hidden（隐藏）,reset（重置），button（点击），file（文件）

size：设置框体大小

name:当表单提交时，后台根据name取得对应的文本框中的value属性对应的值 userName=tom

        姓名:<input type="text" readonly="true" name="userName" size="30px" value="tom"/><br/>

disabled：当type选值为text，表示不能填写内容，且不能点击

readonly：当type选值为text，表示不能填写内容，但可以点击

minlength：当type选值为password，表示最小输入密码长度

maxlength：当type选值为password，表示最大输入密码长度

姓名:<input type="text" readonly="true" name="userName" size="30px" value="tom"/><br/>
        密码:<input type="password" name="pwd" disabled="true" minlength="6" maxlength="10"/><br>

title：鼠标触及的提示内容

年龄:<input type="text"  name="age" size="30px" title="请输入年龄"/><br/>

当type为radio或checkbox时，设置其中一项被默认选中，可以通过checked="true"

select下拉列表

<select name="city">
            <option value="10">西安</option>
            <option value="20">渭南</option>
            <option value="30">宝鸡</option>
        </select>

如果没有设置option的value属性，取得的是两个option标签之间的值 ,否则取得value属性的值

textarea:文本域

<textarea rows="6" cols="50" name="per">请输入个人简介</textarea><br/>

rows="行数" cols="列数"

练习

练习下列代码掌握每个标签功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="demo01.html" method="get">
        姓名:<input type="text" readonly="true" name="userName" size="30px" value="tom"/><br/>
        密码:<input type="password" name="pwd" disabled="true" minlength="6" maxlength="10"/><br>
        确认密码:<input type="password" name="pwd"/><br/>
        年龄:<input type="text"  name="age" size="30px" title="请输入年龄"/><br/>
        性别:<input type="radio" name="sex" value="0" checked="true" id="sex0"><label for="sex0">男</label>
        <input type="radio" name="sex" value="1" id="sex1"/><label for="sex1">女</label><br/>
        爱好:<input type="checkbox" name="hobby" value="eat"/>吃
        <input type="checkbox" name="hobby" checked="checked" value="sleep"/>睡
        <input type="checkbox" name="hobby" value="play"/>玩<br/>
        城市:<select name="city">
            <option value="10">西安</option>
            <option value="20" selected="true">渭南</option>
            <option value="30">宝鸡</option>
        </select><br/>
        个人简介:<br/><textarea rows="6" cols="50" name="per">请输入个人简介</textarea><br/>
        <input type="submit" value="注册"/>
        <input type="reset" value="重置"/>
        <input type="button" value="点击"/>
        <input type="file"/>
        <input type="hidden" value="id"/>
    </form>
</body>
</html>

酱紫学Java

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML简单入门 - 表单

form 常用属性 <form action="提交的后台路径" method="提交方式"> 姓名:<input type="text" name="userName"/><br/> <input type="submit" value="注册"/> </form>表单作用：用来收集用户信息，对应标签是<form>action:提交的用来接收数据的后台路径method:设置提交...
复制链接

扫一扫