• 当前标签:常用表单元素

程序开发 表单、常用表单元素

表单: HTML部分: <body> <form action="#"> <!--action url规定当提交表单时向何处发送数据--> <label for="account">账号:</label> <!--点击label可以使与其关联(通过id)的文本获得焦点--> <input type="text" id="account" name="account" placeholder="请输入你的账号"> <!--name属性用于对提交到服务器后的表单数据进行标识 或者在客户端通过 JavaScript引用表单数据 只有设置了name属性的表单元素才能在提交 表单时传递它们的值--> <!--placeholder 设置文本框提示文字 文本框的默认字号比正常字号小一点--> </form> </body> css部分: *{ /*-moz-box-sizing: border-box;*/ } body{ background-color:red; } input{ border:1px solid lightgreen; padding: 3px 7px; height: 30px; } input:hover,input:focus{ /*:focus表示具有焦点的标签*/ background-color: #3366cc; box-shadow: inset 0px 0px 4px gray; } 常用表单元素: HTML部分: <body> <form action="#"> <fieldset> <!--fieldset元素可将表单内的相关元素分组--> <!--<legend> 标签为 fieldset 元素定义标题。--> <legend>请选择</legend> <div> <!--radio定义单选按钮。checked规定此 input 元素首次加载时应当被选中--> <input type="radio" id="boy" name="ismale" checked> <label for="boy">男孩</label> <input type="radio" id="girl" name="ismale" checked> <label for="girl">女孩</label> </div> <div> <!--checkbox定义复选框--> <input type="checkbox" id="html5" name="skill" checked> <label for="html5">HTML5</label> <input type="checkbox" id="css3" name="skill"> <label for="css3">css3</label> <input type="checkbox" id="javaScript" name="skill"> <label for="javaScript">javaScript</label> </div> </fieldset> <div> <!--select元素创建单选或多选菜单--> <!--multiple规定可以选择多个项目--> <select name="skill" id="skill" multiple size="3"> <!--option元素定义下拉列表中个的一个选项--> <!--selected在首次显示列表中 表现为选中状态--> <optgroup label="技能"> <option value="1">HTML5</option> <option value="2" selected>CSS3</option> <option value="3" selected>JS</option> <option value="4">PHP</option> </optgroup> <optgroup label="LOL"> <option value="5">德玛西亚</option> <option value="6">维恩</option> </optgroup> </select> </div> <!--textarea标签定义多行的文本输入框--> <!--cols规定文本区域的宽 rows规定文本区内的可见行数--> <textarea name="text" id="text" cols="20" rows="10"></textarea> <!--火狐下 cols 规定文本区域的宽 cols + 1(滚动条显现的情况下) rows 规定文本区域的可见行数 rows + 1

2017-05-12 23:26:43 19 0 0
阅读详情
  • 1
前往