html5之form表单

最新推荐文章于 2024-06-15 17:55:19 发布

g1ory.

最新推荐文章于 2024-06-15 17:55:19 发布

阅读量354

点赞数

本文链接：https://blog.csdn.net/qq_48511129/article/details/113530878

版权

form元素：用来定义一个表单
form元素的属性：
action:指定表单的发送地址（服务器地址）
method:表单数据发送至服务器的方法get/post
get方法提交：数据会附在网址之后主动提交给服务器
post方法提交：数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理
input元素：用来设置表单内容项不仅可以布置在表单中，也可以在表单之外的元素使用
input元素的属性；
type属性：指定输入内容的类型，默认为text:单行文本框
name属性：输入内容的识别名称，传递参数时候的参数名称
value属性：默认值
maxlength:输入的最大字数
type属性：
默认为text
password:密码状态输入
submit:提交按钮，点击将数据发送至服务器
reset:重置按钮
button:普通按钮
readonly属性:只读属性，设置内容不可变更
disable属性：设置为不可用
imge：图片式提交按钮
hidden:隐藏字段，该内容不会显示在页面上
email表示要输入一个电子邮箱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
     <form action="1.html" target="_blank">
         <input type="hidden" value="统计">
         用户名：<input type="text" name="username" value="请输入用户名"><br>
         密码：&nbsp&nbsp&nbsp<input type="passsword" maxlength="10" name="password" name="password"><br>
         国家:<input type="text" readonly="readonly" value="中国"><br>
        提示:<input type="text" disabled="disabled" value="请慎重填写"><br>
         <input type="submit" value="提交">&nbsp<input type="reset" value="重置">&nbsp<input type="button" value="普通按钮">
       <br>  <input type="image" src="../cjm.jpg" width="10%" height="10%">
     </form>
</body>
</html>

email:设置邮箱输入框
required属性：设置该内容为必须填写项，否则无法提交
url:表示要输入一个网址
tel：表示输入一个电话号码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
     <form id="myform" name="myform" action="" method="">
       邮箱:<input type="email" name="email" required="required"><br>
         <input type="image" src="../cjm.jpg" width="5%" height="5%"><br>
         请输入要去的网址:<input type="url"><br>
         请输入手机号:<input type="tel">
     </form>
</body>
</html>

number:
可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值
range:
可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值（但是与活动条形式呈现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
     <form action="">
      输入购买数量: <input type="number" max="50" min="2" step="1">
         <br>
         <input type="range" min="0" max="100" value="50">
         <input type="submit">
     </form>
</body>
</html>

时间类：包括datetime/datetime-local/date/month/week/time
color:可以建立一个颜色的选择输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
     <form action="">
     时间：<input type="time"><br>
         日：<input type="data"><br>
         周：<input type="week"><br>
         月:<input type="month"><br>
         本地时间:<input type="datetime-local"><br>
         颜色选择:<input type="color">
         <input type="submit">
     </form>
</body>
</html>

seacrch:用于建立一个搜索框，用来供用户输入搜索的关键词
file：用来创建一个文件选取的输入框可通过accept属性规定选取文件的类型，比如图片/视频
multipe属性可以设定一次允许选择多个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
     <form action="">
     搜索：<input type="search" placeholder="请输入搜索关键词">
         <br>
         <input type="file" accept="image/png" multiple="">
         <input type="submit" value="上传图片">

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

checkbox复选框：用来创建一个复选框
radio单选框：用来创建一个单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
     <form action="">
     <h3>兴趣爱好</h3>
         <input type="checkbox" name="dx" value="A">打篮球
         <input type="checkbox" name="dx" value="B">踢足球
         <input type="checkbox" name="dx" value="C">打羽毛球
         <input type="checkbox" name="dx" value="D">跑步
         <input type="checkbox" name="dx" value="E">看书
     </form>
 <form action="">
     <h3>性别</h3>
         <input type="radio" name="dx" value="A">先生
         <input type="radio" name="dx" value="B">女生
         <input type="radio" name="dx" value="C">保密
     </form>
</body>
</html>

select元素：用来建立一个下拉菜单选项列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
     <h3>选择你的课程</h3>
     <form action="">
         <select>
             <option value="C">C</option>
             <option value="C++">C++</option>
             <option value="python">python</option>
             <option value="html5">html5</option>
         </select>
         <input type="submit">
     </form>
</body>
</html>

datalist元素：用来建立一个选项列表。通常与input元素配合使用
form属性：将表单外的内容与表单进行关联
novalidate属性：设置数据提交时不进行验证
lable元素：用来为input元素定义标注，建立一个与之相关联的标签
textarea元素：用来建立多行输入文本框rows设置多行文本的行数cols设置多行文本的宽度，不仅可以用在表单中，也可以用在其他快元素或内联元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
    <form action="">
        用户名:<input type="text" size="30"><br><br>
        意见：<textarea rows="5" cols="30" style="background:blanchedalmond"
                     placeholder="感谢你的建议和意见，谢谢参与"></textarea><br><br>
        <input type="submit"><input type="reset">
     </form>
</body>
</html>

output元素：数据的输出
oninput:当用户对元素数据的输入时触发
parseInt()是一个javascript函数,它可以解析一个字符串，并返回一个整体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
</head>
<body>
   <form action="" id="myform" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
       <input type="number" id="num1">+<input type="number" id="num2">=
       <output name="num" for="num1 num2"></output>
   </form>
</body>
</html>

g1ory.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5之form表单

form元素：用来定义一个表单form元素的属性：action:指定表单的发送地址（服务器地址）method:表单数据发送至服务器的方法get/postget方法提交：数据会附在网址之后主动提交给服务器post方法提交：数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理input元素：用来设置表单内容项不仅可以布置在表单中，也可以在表单之外的元素使用input元素的属性；type属性：指定输入内容的类型，默认为text:单行文本框name属性：输入内容的识别名称，传
复制链接

扫一扫