欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WEB前端之网页设计④----最新最全详解/网页中的表单

程序员文章站 2022-04-19 17:16:12
...

WEB前端之网页设计④—-最新最全详解/网页中的表单

一、表单效果图:
WEB前端之网页设计④----最新最全详解/网页中的表单

代码片段:

<form action="个人简介.html" method="post" >
  用户名:
  <input  type="text" placeholder="请输入您的用户名" size="" maxlength="5" name="username"/>
  <br/>
  密&nbsp&nbsp码:
  <input type="password" value="请输入您的密码" size="" maxlength="6" name="pwd"/>
  <br/>
  性&nbsp&nbsp别:
  <input type="radio" value="man" name="sex"/>
  男
  <input type="radio" value="woman" name="sex"/>
  女 <br/>
  爱&nbsp&nbsp好:
  <input type="checkbox" value="qiu" name="lq"/>
  篮球
  <input type="checkbox" value="qiu" name="zq"/>
  足球
  <input type="checkbox" value="qiu" name="pq"/>
  排球
  <input type="checkbox" value="qiu" name="ppq"/>
  乒乓球 <br/>
  所在城市:
  <select >
    <option>北京</option>
    <option>上海</option>
    <option>郑州</option>
    <option>平顶山</option>
  </select> <br/>
  客观描述:<textarea rows="8" cols="30">请输入您对自己的客观描述</textarea><br/>
  提交信息:<input type="button" value="普通按钮"/> 
   <input type="submit" value="提交按钮"/> 
   <input type="reset" value="重置按钮"/> <br/>
   <hr/>
   <a href="表格.html">点我回到表格的案例</a>
     <a href="../three/html第三章css层叠样式表1.html">转到第三章层叠样式表</a>
</form>

二、from标签详解及属性

from标签 解释
<from></from> from标签是要告诉浏览器我要在这个地方写表单
属性 解释
action=”URL” 要提交的地址,链接
method=”post/get” 表示用于发送from-data的HTTP方法
target=”_blank/_self/_parent/_top/_framename” 在新窗口中打开/默认。在相同的框架中打开/在父框架集中打开/在整个窗口中打开/在指定的框架中打开

三、input标签详解及属性

input标签 解释
<input></input> 根据不同的 type 属性值,可以有很多不同的表现形式,用于收集用户信息
属性 解释
align=”center/lift/right/bottom” 居中/左对齐/右对齐/底部对齐
max=“” 表示输入字段的最小值
max=“” 表示输入字段的最大值
size=“” 表示输入的表单框的宽度
name=“” 定义input元素的名称
value=“” 定义input元素的值
type=”button” 表示这个input元素是一个简单的按钮,一般和JavaScript脚本相关联。
type=”checkbox” 表示这个input元素是一个复选框
type=“text” 表示这个input元素是一个文本输入框
type=”password” 表示这个input元素是一个密码输入框,默认为密文显示
type=”radio” 表示这个input元素是一个单选按钮,注意name值一定要相同哦。
type=“submit” 表示这个input元素是一个提交按钮可以给表单元素的内容发送给服务器,from标签中action中的那个url
type=“reset” 表示这个input元素是一个重置按钮,点击可使表单上的内容重置
maxlength=“” 可以限制文本输入的长度

四、select/option标签详解及属性

select标签 解释
<select><option></option></select> select是一个下拉选项菜单,用户可在其中选择符合自己的内容;option元素定义下拉列表中的一个选项
select属性 解释
multiple=“multiple” 规定可选择多个选项
name=“name” 规定下拉列表的名称
required=“required” 规定文本区域是必填的
size=“number” 规定下拉列表中可以看见的选项数目
option属性 解释
selected 规定选项(在首次显示在列表中时)表现为选中状态

五、textarea标签详解及属性

textarea标签 解释
<textarea></textarea> 可以在这个输入框中输入多行的文本内容,注意:”%OD%OA” (回车/换行)
属性 解释
maxlength=“number” 规定该文本输入区中输入的最大字符长度
name=”name” 文本区的名称
placeholder=“text” 规定描述文本区域预期值的简短提示
readonly=“”readonly 规定文本区为只读
required=“required” 规定文本区域是必填的
rows=“number” 规定文本区内的可见行数

结语: 以上的这些就是表单的一些基本标签和属性,后期还会在更新和学习。
上一篇:WEB前端之网页设计③—-最新最全详解/如何在网页上创建表格
下一篇:WEB前端之网页设计⑤—-最新最全详解/CSS层叠样式表
版权声明:非商用*转载-保持署名-注明出处
署名(TM): TopGradeModel

相关标签: 网页设计