表单的用法

最新推荐文章于 2024-07-20 22:13:44 发布

z200105

最新推荐文章于 2024-07-20 22:13:44 发布

阅读量22

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/z200105/article/details/131379203

版权

表单标签：1. input 输入框

type：设置数据类型

text 文本

password 密码

radio 单选按钮，在一组数据中选择一个，相同name值的为一组

checkbox 多选框可以同时选择多个，选中取消操作

email 邮箱，有自带的格式判断

tel 手机号

button 普通按钮

reset 重置

submit 提交，只是将数据提交到浏览器

file 上传文件

date 日期

2.下拉框 select 设置下拉框

option 下拉选项

3.文本域 textarea

属性

rows 设置行

cols 设置一行的宽度

4.按钮 button 双标签，更方便设置按钮样式

属性

type

button 普通按钮

reset 重置按钮

submit 提交按钮
实例：

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<form action="">

用户名：<input type="text" placeholder="用户名设置成功后不可修改" maxlength="30" minlength="6"> <br>

登录密码：<input type="password" placeholder="6-20位字母，数字或符号" maxlength="20" minlength="6"><br>

确定密码：<input type="password" placeholder="再次输入您的登录密码"><br>

证件类型：<select name="" id="">

<option value="">港澳居民来往内地通行证</option>

</select><br>

姓名: <input type="text" placeholder="请输入证件上的中文姓名"><br>

证件号码: <input type="tel" placeholder="请输入您的证件号码"><br>

证件有效期截止日期：<input type="date"><br>

出生日期：<input type="date"><br>

性别：<input type="radio" name="sex" id="man"><label for="man">男</label>

<input type="radio" name="sex" id="woman"><label for="woman">女</label>

优惠（待）类型：<select name="" id="">

<option value="">成人</option>

</select><br>

邮箱：<input type="email"><br>

手机号码： <select name="" id=""><option value="">+86 中国</option></select><input type="tel"><br>

<input type="button"> 我已阅读并遵守 <a href="">中国铁路</a>

</form>

</body>

</html>