HTML基础学习（4）——表单

最新推荐文章于 2024-07-17 18:42:40 发布

换元不配限

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量384

点赞数

分类专栏： web前端文章标签： html 学习前端表单

本文链接：https://blog.csdn.net/ITMonkeyKing/article/details/128900757

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

往期文章

HTML基础学习（1）——HTML基本标签
 HTML基础学习（2）——超链接和使用图像
 HTML基础学习（3）——认识表格

表单常用来收集客户端提供的信息，使得网页具有交互功能。如会员注册、搜索等。

1. form元素

form元素用于定义菜单。form元素的属性：

属性	描述
accept-charset	被提交表单中使用的字符集
action	提交表单的地址(URL)
autocomplete	浏览器应该自动完成表单
enctype	被提交数据的编码
method	提交表单时所用的HTTP方法（默认：GET）
name	识别表单的名称
novalidate	规定浏览器不验证表单
target	规定action属性指定目标窗口的打开方式

2. input元素常用属性

属性	值	描述
name	field_name	定义input元素名称
type	button checkbox file hidden image password radio reset submit text	规定input元素类型
placeholder	text	规定帮助用户填写输入字段的提示
value	value	规定input元素的值
width	pixels %	input字段的宽度
disabled	disabled	当input元素加载时禁用此元素
height	pixels %	input字段的高度
alt	text	定义图像输入的替代文本
autocomplete	on off	是否使用输入字段的自动完成功能
autofocus	autofocus	输入字段在页面加载时是否获取焦点
checked	checked	规定此input元素首次被加载时应当被选中
readonly	readonly	规定输入字段为只读
src	URL	定义以提交按钮形式显示图像的URL
maxlength	number	规定输入字段中字符的最大长度
max	number date	规定输入字段的最大值与min属性配合使用，来创建合法值的范围
size	number_of_char	定义输入字段的宽度
min	number date	规定输入字段的最小值与max属性配合使用，来创建合法值的范围
multiple	multiple	如果使用该属性，则允许一个以上的值

3. 表单示例

<!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="">
        <!-- 文本框 -->
        用户名：<input type="text" name="username" placeholder="请输入用户名"><br>
        密码：<input type="password" name="pw">
        <br>
        <!-- 单选框 -->
        性别：<input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
        <br>
        <!-- 复选框 -->
        兴趣爱好：<input type="checkbox" name="interest" value="game" checked>游戏
        <input type="checkbox" name="interest" value="football" checked>足球
        <input type="checkbox" name="interest" value="swimming" checked>游泳
        <input type="checkbox" name="interest" value="read" checked>读书
        <br>
        <!-- 普通按钮 -->
        <input type="button" name="close" value="关闭窗口" onclick="window.close()">
        <br>
        <br>
        <!-- 提交按钮 -->
        <input type="submit" name="submit" value="提交">
        <!-- 重置按钮 -->
        <input type="reset" name="clean" value="重置">
        <br>
        <br>
        <!-- 图像image域 -->
        <input type="image" name="图像域名称" src="img/按钮.png">
        <br><br>
        <!-- 数值number -->
        <input type="number" name="num" value="3" min="0" max="10" step="2">
        <br>
        <br>
        <!-- 时间选择器 -->
        <input type="date" name="date">
        <input type="datetime-local" name="date">
        <br>
        <br>
        <!-- 下拉菜单 -->
        地区:<select name="select">
            <option value="北京" selected="selected">北京</option>
            <option value="上海">上海</option>
            <option value="天津">天津</option>
            <option value="山东">山东</option>
            <option value="河南">河南</option>
        </select>
        <br>
        <!-- 文本域 -->
        留言：<br>
        <textarea name="message" cols="80" rows="10"></textarea>

    </form>
</body>
</html>