码迷,mamicode.com
首页 > 其他好文 > 详细

第二十节-重要表单(form 与 input)

时间:2020-01-05 15:46:04      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:get   自带   种类   规范   单选框   isa   属性   内容   NPU   

网页中 搜索框 或者注册单都是用表单元素来做的

form: 三个属性  1.action: 提交地址(目前写#练手)     2.method:提交方法:get/post, get提交会将键值对显示在网址不安全,post则不会     3.target: 可写_blank,在新网页打开。4.name 如果写这个属性,那么值就不可空,且要独一无二,还要与表内容契合

form 的子元素:input(行内元素,但具有行内块属性)

input:三个属性  1.type(类型)    2. name   3.value       (name 与 value组成键值对 传递给 后端,后端会告诉前端对name value有什么规范的,name是键名,value是键值)

                           4.placeholder(占位)

        type种类:1.text <input type="text" name="文字“ value="我是内容">

                         2.radio(单选框)    <input type="radio" name="女人” value="1" id="1"><label for="1"> 女人</label>

                         3checkbox(多选框)  <input type="checked" name="女人” value="1" id="1"><label for="1"> 女人</label>

                                     label配合单选框 多选框使用,把文字放在label,点击文字或者按钮都可以,以此提升用户体验

                                    disabled :禁用   checked: 默选

                                                        <input type="radio" name="女人” value="1" id="1" checked ><label for="1"> 女人</label>

                        4.reset(重置按钮,点击清空form内容)

                                                        <input type="reset" value="重置表单">

                        5.submit(提交按钮)  <input type="submit" value="提交">

                        6.password(密码)    密码:<input type="psaaword" name="password">

                        7.button(按钮)      <input type="button“ value="普通按钮">

                              与button区别:button自带提交效果           <button>你</button>

                        8.现在用不到:image与file    <input type="image" src="">(一般给input背景图片带代替type="image")

                                                                    <input type="file">

                        9.hidden标签, <input type="hidden" name="" value="">   用户看不到的标签。

 

 

                                                       

第二十节-重要表单(form 与 input)

标签:get   自带   种类   规范   单选框   isa   属性   内容   NPU   

原文地址:https://www.cnblogs.com/yzdwd/p/12152505.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!