HTML表单的用法
2017-08-29 本文已影响0人
D一梦三四年
HTML中表单的作用主要是用来收集用户信息并提交给服务器
- 其中常见的标签有
<from> <label> <input> <textarea> <button> <select>
表单中一些简单的应用如下
- <form>的action属性代表要提交的地址,method属性有两个值get和post,post安全性更高,常用于提交信息,get则常用于在搜索引擎获取信息
<form action="http://www.zhouchenga.com/" method="post"></form>
- <input>标签根据type的属性值不同有不同的效果
- type="text" 单行文本输入框
- type="password" 密码输入框
- type="radio" 单选
<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>
- type="checkbox" 多选
<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>
- type="file"上传文件
<input type="file" accept="image/*">
- type="button",type="submit",type="reset" 定义不同功能的按钮,分别为无定义,提交,恢复至默认状态
- type="hidden" 隐藏域:隐藏不想被用户看见的内容
<input type="hidden" name="game" value="invisible">
- <label>标签的作用是:当点击label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上,<label> 标签的 for 属性值应当与相关元素的 id 属性值相同
- <textarea>多行文本框
<textarea name="haha" id="gogo" cols="30" rows="10"></textarea>
- <select>下拉菜单
<select>
<option value="1">man</option>
<option value="2">woman</option>
</select>
- <button>标签的 type属性也具有3个值button,submit,reset;与<input>中type的button,submit,reset具有相同的作用
- 表单中还具有两个非常有意思的属性
placeholder
和check
,
placeholder可以在输入框中提示用户应该填写什么信息;check则可以检查用户有没有输入符合要求的字段