67.【HTML 5】(三)

简介: 67.【HTML 5】

13.文本框和单选框

文本款必写:
<input type="radio" value="box" name="sex"/>

单选框标签 
 type:
 value: 值
 name: 组名
    <p>性别: 男<input type="radio" value="box" name="sex"/>
         女<input type="radio" value="girl" name="sex"/>
    </p>

14.按钮和多选框

必写:
1.多选框
type value name
2.单选框标签
 type:  value: 值  name: 组名
3.按钮:
type value name
4.图片按钮  (具有提交地功能)
type  src
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
<form>
action :表单提交地位置,可以是网站,也可以是一个请求处理地位
method : post|get 提交方式
get方式提交: 我们可以再url中,看到我们提交地信息,不安全,能够看到账号和密码
pos方式提交: 我们看不到密码和账号,比较安全。
`
2.<input>
type : 文本框类型
name : 组名
value : 默认值
maxlenth: 最多输入多少个字符
size : 文本框长度
-->
<h1>注册窗口</h1>
<form action="1.我的第一个网页.html" method="post">
<!--文本输入框-->
<p>名字: <input type="text" name="Username" value="请输入您地账号" maxlength="8" size="30"></p>
<p>密码: <input type="password" name="Passworld"></p>
<!-- 单选框标签
 type:
 value: 值
 name: 组名
 -->
    <p>性别: 男<input type="radio" value="box" name="sex"/>
         女<input type="radio" value="girl" name="sex"/>
    </p>
<!--    多选框
type value name
-->
    <p>爱好:
        睡觉:<input type="checkbox" value="sleep" name="hobby">
        游戏:<input type="checkbox" value="playGrame" name="hobby">
        学习:<input type="checkbox" value="learn" name="hobby">
        吃饭:<input type="checkbox" value="eat" name="hobby">
    </p>
<!--    按钮
button 普通按钮
image 图片按钮
submit 提交按钮
reset 重置按钮
-->
    <p>按钮:
        <input type="button" name="but1" value="默认值">
<!--        图片按钮有自动提交地功能     -->
        <input type="image" src="../resources/imag/3.jpg">
    </p>
<p>
  <input type="submit" name="提交">
  <input type="reset" name="重置">
</p>
</form>
</body>
</html>

15.列表框和文本域和文件域

1.下拉框:
<select name="列表名称" id="">
            <option value="选填">China</option>
            <option value="选填">America</option>
            <option value="选填" selected>Jpane</option>
            <option value="选填">India</option>
</select>
2.文本域
<p>反馈</p>
    <p>
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>
3.文件域
<p>
    <input type="file" name="files">
</p>

16.搜索框和滑块和简单验证

1.简单验证:
<!--    邮件验证-->
    邮箱:
    <input type="email" name="email">
<!--    -->
    <p>
        数字:
        <input type="number" name="number" max="100" min="0" step="1">
    </p>
2.滑动块
    <p>
        <input type="range" name="voice" min="0" max="100">
    </p>
3.搜索框:
 <p>搜索:
        <input type="search" name="seach" >
</p>

17.只读

readonly  只读
disabled  禁用
value 默认值
hidden 隐藏

18.表单的应用(增强鼠标地可用性)

for=""  ----->指向id 地值  
id=""  ------->自定义
    <p>
        <label for="mark">你点击我试试看 </label>
        <input type="text" id="mark">
    </p>

19.表单地初级验证

placeholder  提示信息 (文本框常用)
required  不能为空(文本框常用)
pattern  (正则表达式)
eg:
pattern=" "
相关文章
|
3天前
|
移动开发 Ruby HTML5
HTML52
HTML5引入了许多语义元素,
|
3月前
|
数据格式
什么是HTML?
【8月更文挑战第27天】什么是HTML?
38 2
|
3月前
|
移动开发 HTML5
初识HTML5
【8月更文挑战第23天】初识HTML5。
41 3
|
5月前
|
移动开发 前端开发 搜索推荐
|
5月前
|
前端开发 JavaScript 数据可视化
HTML想见你
HTML想见你
35 1
|
5月前
|
前端开发 数据安全/隐私保护
HTML总结
块级元素各占据一行,垂直方向排列;块级元素以新行开始,以换行结束。内联元素在显示时通常不会以新行开始,相邻的行内元素会排列在同一行例,直到一行排不下才会换行。 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效,其宽度随元素的内容而变化,margin上下无效,padding上下无效。块级元素可以设置宽、高,盒模型各属性也均能成功设置。
19 0
|
6月前
|
开发者
html怎么学
【4月更文挑战第10天】html怎么学
30 1
|
前端开发
HTML详解连载(7)
HTML详解连载(7)
|
前端开发 C++ Windows
HTML详解连载(1)
HTML详解连载(1)
|
移动开发 前端开发 JavaScript
HTML基本讲解与使用
HTML基本讲解与使用