html做成小程序,HTML-简单表单制作-表单制作-小程序表单制作

模板!DOCTTYPEhtmlhtmlheadmetacharset="utf-8"/

1.//此处为输入文本格式，避免乱码现象title此处输入内容/titlestyletype="text/css"

2.//style表示将在浏览器中以怎样的形式展现出(这里为文本、css)span{color:pink;}

3.//span，分块，在这里先定义颜色或者加粗字体等样式。可在开头直接定义样式，或随用随定义。.button{*//前面的.代表一个样式，一个元素。*background-color:#008CBA;border:none;*//border为边框*color:white;*//此处的color为该botton里面的内容的颜色*padding:10px30px;//padding为边距text-align:center;text-decoration:none;display:inline-block;//display规定元素生成的类型(此处的inline-block与blockinline对比)

4.display:block1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。3.block元素可以设置margin和padding属性。display:inline1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。2.inline元素设置width,height属性无效。3.inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。display:inline-block1.简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。font-size:16px;margin:4px2px;cursor:pointer;}/style/headbodybgcolor="颜色"background="图片地址"

5.*//bgcolor为背景颜色，background为背景图片。在body里面输入需要执行的内容。h1align="center"span输入内容span/h1

6.//此处h1为大标题，h2，h3…依序变小。此处span与上面span的应用模式相同，可根据原span所设定的改变，改变span之间的内容的样式。*hrcolor="#颜色码"

7.//hr为水平线formaction="action.php"method="post"target="_blank"

8.//form为建立表单形式，action则让button有反应转入后台，提交表单。method则为转入方法，其类似方法还有method=“get”，target="_blank"则表示为另开一个页面显示提交结果tablewidth="600px"align="center"

9.//table本为表格标签，在这里可帮助表单有表格的形式，使之有整齐感。width为表格宽度。trtdalign="right"姓名：/tdtdalign="left""inputtype="text"name="username"size="25"maxlength="26"placeholder="请输入姓名"style="border-radius:7px;"//td/tr

10.//tr表示行，td表示列。tr里面有多少个td就表示一行有多少列。input表示输入框，type，为该输入框的类型，type=“text”，定义用户可输入文本的单行输入字段。type="password"为账号密码类型。type="file"为文件类型等等。placeholder为默认提示值。name为输入的内容属性，此处为用户姓名。在多个选项中若有checked则为默认选中值。若其中有value，value属性为input元素设定值。tdalign="right"性别：/tdtdalign="left"男inputtype="radio"name="sex"value="man"style="border-radius:7px;"/女inputtype="radio"name="sex"value="wowan"style="border-radius:7px;"/保密inputtype="radio"name="sex"value="bm"checkedstyle="border-radius:7px;"//td/tr

11.//radio为单选选项。border-radius为使输入框边角变圆(其7px是使输入框变圆的程度，也可以10px，12px等等)。与radio相似的是checkbox，checkbox为多选框selectname="city"size="5"multiplestyle="border-radius:7px"/optionvalue="xj"selected=""--请选择--/optionoptgrouplabel="华北"optionvalue="bj"北京/optionoptionvalue="tj"天津/optionoptionvalue="hb"河北/option/optgroupoptgrouplabel="华东"optionvalue="sh"上海/optionoptionvalue="xm"厦门/optionoptionvalue="yd"英德/option/optgroup/select

12.//select``/select是下拉表格，size=“数字”则为当选择时，下拉表格会显示出多少个选项。multiple是多选，同时摁住ctrl再点击选项即可多选。option``/option则为选项内容。optgrouplabel=""``/optgroup则为每一个或多个选项的分类。在此，北京，天津，河北属于华北。trtdalign="right"简介:/tdtdalign="left"textareaname="jj"rows="6"cols="50"placeholder="请输入文字。"style="border-radius:10px;"//textarea/td/trtrtdcolspan="2"align="center"buttonclass="button"type="submit"value="注册"name="submit"style="border-radius:7px;"注册/buttonbuttonclass="button"type="reset"value="重置"name="reset"style="border-radius:7px;"/重置/button/td/tr

13.//textarea为文本框，输入文本。rows为行数，cols列数。colspan是跨越两行。type="submit"提交。type="reset重置。/trtrtdinputtype="hidden"name="hideen"value="这是一个作业"//tdtd/td/tr

14.//hidden是隐藏，不让用户所见。/table/form/body/html

15.成品如下：