我爱编程

HTML表单标签

2018-05-24  本文已影响0人  Scalelength

<form></form>表单标签,用于用户交互
表单是可以把浏览者输入的数据传送到服务器端,这样就可以处理表单传过来的数据。
语法:<form method="传送方式" action="服务器文件"></form>
注意的是<form></form>是成对出现的
method:“get/post”是传送方式
action:是输入的数据被传送到的地方

表单中的标签

(1)<label></label>label标签
<label for="控件id名">文字</label>
    一般后面加的input框的name值和for里内容相互呼应,label控件不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你用鼠标单击label标签内的文本,就会触发该控件并自动转跳到其所对应的表单控件上

2<input type="text/password/email" value="" name="" id="与label中的for相呼应" />
    此标签随type的值变化而变化 value:文本框/按钮上的显示值
    type=“text”为输入框 name:为文本框命名,以备后台程序ASP、PHP使用
    type="password"为密码框

2-(1) text和password

    <input type="email" id="email" placeholder="Enter email" />
        type="email"为邮箱框
        placeholder=""格式值,点击即消失

2-(1)email 2-(1)email样例

    <input type="submit/reset" value="提交/重置" name="" />
        type="submit"为确认键/提交键
        type="reset"为重置键

2-submit/reset 2-submit按钮/reset按钮样例

    <input type="radio/checkbox" value="值" name="名称"     checked="checked" />
        type="radio"为单选框
        type="checkbox"为复选框
        value:提交数据到服务器的值(后台PHP)
        name:为控件命名,以备后台程序ASP、PHP使用        checked:设置为checked时视为该项默认选中

2-(2)-radio/checked 2-(2)-radio/checked样例

(3)<textarea rows="行数" cols="列数">文本</textarea>文本标签
    rows:多行输入域的行数
    cols:多行输入域的列数
    其实就是设置textarea的高度和宽度
    在后期css中,可用width和height来代替
    width代替cols,height代替rows

2-(3)-textarea 2-(3)-textarea样例

(4)<select><option value="值">文本</option><select>下拉列表框标签
    通常来说value的值与文本相同,但值是向服务器提交的值,文本是显示给用户的

2-(4)-列表框标签 2-(4)-列表框样例

    <select multiple="multiple"></select>
        表示该下拉列表框可以多选(按住ctrl)

    <option value="值" selected="selected"></option>
        设置selected=“selected”属性,则该选项就默认选中

2018年5月24日08:22:40

上一篇 下一篇

猜你喜欢

热点阅读