文章目录
表单和表单元素标签
- 表单：是一个区域，采集用户信息
- 表单元素：文本框、按钮、单选、复选、下拉列表、文本域
一、表单 form
<form> 标签用于为用户创建 HTML 表单。表单内包含表单元素
- 表单作用：表单用于向服务器传输数据。
<form> 标签，用法如下：
<form action="URL">
表单元素
</form>
action 为 form 标签的一个元素，该元素的值为 URL 用于规定当提交表单向何处发送表单数据
<form> 其他的更多属性：传送门
二、表单元素标签 input select textarea 等等
1. 文本框和密码框
即 <input> 标签的 type 属性为 text 或者 password
<form>
<input type="text" name="text"/> <!--当前为文本框-->
<input type="passowrd name="psd" /> <!--当前为密码框-->
</form>
通常每个表单都会带有一个 name 属性，这个name 属性就是这个表单数据的名字
- name属性的作用：当表单的元素的数据提交到后端的时候，那么这时候后端在处理数据的时候，就需要知道这个数据来源于哪个表单元素。这就是他的作用
- 简单的概括一句，就是 告诉后端要处理的数据来源于哪个表单元素
2. 提交按钮、重置按钮
即 <input> 标签的 type 属性为 sublime 或者 reset
<form>
<input type="sublime" value="提交按钮"/>
<input type="reset" value="重置按钮" />
</form>
value 属性：input 元素的值。
- 在按钮中也就是
<input>标签显示的文本
3. 单选框、复选框
单选框：顾名思义 只能选择一个选项，复选框即可以选择多个选项
<form>
<input type="radio 或 checkbox"
value="值" name="名称" checked="checked">
</form>
checked 属性：当设置 checked="checked"时，该选项被默认选中
性别：
<input type="radio" value="boy" name="gender" checked="checkbox"/>男
<input type="radio" value="girl" name="gender"/>女
<br />
爱好：
<input type="checkbox" value="1" name="music">音乐
<input type="checkbox" value="2" name="sport">体育
<input type="checkbox" value="3" name="code" checked="checkbox">写代码
- 对于单选框，我们要注意的是 name的属性的值要一致！！！
- 对于复选框，name 的属性的值可以不用
4. 下拉列表框
<select>
<option>选项1</option>
<option selected="selected">选项2</option>
</select>
selected 属性：当设置 selected="selected"时，该选项被默认选中，作用和上述的 checked 属性相同。
5. 文本域
<textarea rows="行数" cols="列数">文本</textarea>
- 在
<textarea>标签内写下的文字，会默认的出现到编辑区域内，作为提示性文本
代码运行网页：传送门 各位小伙伴可以自行感受一下，代码如下
（补充：表单元素没有自动换行的效果，为了展示更美观，所以我加上了 <br />标签进行换行）
<form>
账号：<input type="text" name="userName"/>
<br />
密码：<input type="password" name="userPsd"/>
<br />
性别：
<input type="radio" value="boy" name="gender" checked="checkbox"/>男
<input type="radio" value="girl" name="gender"/>女
<br />
爱好：
<input type="checkbox" value="1" name="music">音乐
<input type="checkbox" value="2" name="sport">体育
<input type="checkbox" value="3" name="code" checked="checkbox">写代码
<br />
年级：
<select>
<option>大一</option>
<option>大二</option>
<option>大三</option>
<option>大四</option>
<option selected="selceted">请选择</option>
</select>
<br />
个人简介：
<br />
<textarea cols="50" rows="10">
在这里输入内容...
</textarea>
<br />
<input type="submit" value="点击确认" />
<input type="reset" value="点击重置" />
</form>
