HTML表单的用法

2017-08-29  本文已影响0人  D一梦三四年

HTML中表单的作用主要是用来收集用户信息并提交给服务器

<from> <label> <input> <textarea> <button> <select>

表单中一些简单的应用如下

  1. <form>的action属性代表要提交的地址,method属性有两个值get和post,post安全性更高,常用于提交信息,get则常用于在搜索引擎获取信息
<form action="http://www.zhouchenga.com/" method="post"></form>
  1. <input>标签根据type的属性值不同有不同的效果
<span>性别:</span>
          <input type="radio" id="man" name="sex" value="man" />
          <label for="man">男</label>
          <input type="radio" id="woman" name="sex" value="woman" />
          <label for="woman">女</label>
<span>爱好:</span>
          <input type="checkbox" id="dota" name="hobby" value="dota" />
          <label for="dota">dota</label>
          <input type="checkbox" id="traving" name="hobby" value="旅游" />
          <label for="traving">旅游</label>
          <input type="checkbox" id="pet" name="hobby" value="宠物" />
          <label for="pet">宠物</label>
<input type="file" accept="image/*">
<input type="hidden" name="game" value="invisible">
  1. <label>标签的作用是:当点击label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上,<label> 标签的 for 属性值应当与相关元素的 id 属性值相同
  2. <textarea>多行文本框
<textarea name="haha" id="gogo" cols="30" rows="10"></textarea>
  1. <select>下拉菜单
<select>
            <option value="1">man</option>
            <option value="2">woman</option>
</select>
  1. <button>标签的 type属性也具有3个值button,submit,reset;与<input>中type的button,submit,reset具有相同的作用
  2. 表单中还具有两个非常有意思的属性placeholdercheck
    placeholder可以在输入框中提示用户应该填写什么信息;check则可以检查用户有没有输入符合要求的字段
上一篇下一篇

猜你喜欢

热点阅读