html !DOCTYPE html html lang en head meta charset UTF-8 title 登陆注册 /title /head body h1 注册 /h1 !--1.表单form action: 表单提交的位置, 可以是网站, 也可以是一个请求处理地址 method: post, get 提交方式 get方式提交: 我们可以在url中看到提交的信息, 不安全但高效 post方式提交: 比较安全,可以传输大文件 form action 1.我的第一个网页.html method get !--2.文本输入框: input type text value 身伤易逝 默认 maxlength 8 最长能写几个字符 size 30 文本框的长度 p 名字: input type text name username value 身伤易逝 maxlength 8 size 30 /p !--3.密码输入框: input type password -- p 密码: input type password name pwd /p !--4.单选框标签 input type radio value : 单选框(必填) name :表示组(必填) checked: 默认选中 input type radio value boy name sex / 男 input type radio value girl name sex checked/ 女 !--5.多选框标签 input type checkbox value : 多选框(必填) name :表示组(必填) checked: 默认选中 input type checkbox value eat name hobby 吃饭 input type checkbox value sleep name hobby checked 睡觉 input type checkbox value PlayGame name hobby 打游戏 !--6.按钮-- input type button name bt1 value 身伤易逝,情伤难合 !--7.下拉框、列表框-- select name 列表名称 option value 中国 中国 /option option value 美国 美国 /option option value 俄罗斯 俄罗斯 /option option value 阿富汗 selected 阿富汗 /option /select !--8.文本域 textarea ols 10 列 rows 5 行 textarea name textarea cols 10 rows 5 文本内容 /textarea !--9.文件域-- input type file name files input type button value 上传 name upload !--10.邮箱验证-- input type email name email !--11.URL-- URL: input type url name url !--12.数字 input type number max、min 最值 step: 步长 数字(0~100、步长为10): input type number name num max 100 min 0 step 10 !--13.滑块 input type range input type range name voice min 0 max 100 step 1 !--14.搜索框-- input type search name search !--15.提交与重置按钮-- input type submit value 提交 input type reset value 重置 width 30 height 20 /form /body /html
表单元素格式:
!DOCTYPE html html lang en head meta charset UTF-8 title 表单应用 /title /head body form action 3.图像标签.html method get !--1.只读 readonly input type text name username value 身伤易逝 maxlength 8 size 30 readonly !--2.禁用 disabled input type radio value boy name sex / 男 input type radio value girl name sex disabled/ 女 !--3.隐藏 hidden select name 列表名称 hidden option value 中国 中国 /option option value 美国 美国 /option option value 俄罗斯 俄罗斯 /option option value 阿富汗 selected 阿富汗 /option /select !--4.增强鼠标可用性 label for label for mark 点我跳转到id mark指定的位置 /label input type text id mark input type submit value 提交 input type reset value 重置 width 30 height 20 /form /body /html12、表单初级验证
!DOCTYPE html html lang en head meta charset UTF-8 title 表单初级验证 /title /head body form action 3.图像标签.html method get !--1.提示信息 placeholder input type text name username maxlength 8 size 30 placeholder 请输入用户名 !--2.非空判断 required input type password name pwd maxlength 8 size 30 required !--3.正则表达式 pattern https://www.jb51.net/tools/regex.htm p 自定义邮箱 input type email pattern w ([- .]w )* w ([-.]w )*.w ([-.]w )* input type submit value 提交 input type reset value 重置 width 30 height 20 /form /body /html
