一、html中：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>表格和表单</title>
</head>
<body>
<h4>规整的表格</h4>
<!--table标签是表格标签，border属性设置表格的边框厚度，
width属性设置表格的宽度，align设置表格的对齐方式，cellspacing设置单元格的间距
tr是行标签，td是单元格标签，th是字体居中加粗的单元格标签,b是字体加粗标签-->
<table align="center" border="2" width="500" cellspacing="0">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<th>2.1</th>
<th>2.2</th>
<th>2.3</th>
</tr>
<tr>
<td><b>3.1</b></td>
<td><b>3.2</b></td>
<td><b>3.3</b></td>
</tr>
</table>
<h4>不规整的表格</h4>
<!--colspan属性可以横向拓展，rowspan属性可以竖向拓展-->
<table align="center" border="2" width="500" cellspacing="0">
<tr>
<td colspan="3">1.1</td>
</tr>
<tr>
<th rowspan="2">2.1</th>
<th>2.2</th>
<th>2.3</th>
</tr>
<tr>
<td><b>3.2</b></td>
<td><b>3.3</b></td>
</tr>
</table>
<h4>表单</h4>
<!--input是输入标签，
可以通过type选择其输入的类型：
text是文本框，password是密码框，radio是单选框，
checkbox是复选框，reset是重置按钮，submit是提交按钮，
button是按钮，file是文件上传，hidden是隐藏域
value属性可以设置默认显示的内容。对于选择框 checked属性可以默认选中
name属性的值：是表单提交时 携带的各个参数的参数名（可以区分不同的参数，防止冲突）
select标签是下拉列表标签，option标签是选项，selected属性可以设置默认选中
textarea标签是多行文本框，rows是高度，cols是宽度-->
<form>
账户：<input type="text" value="请输入你的账号"/><br />
密码：<input type="password" ><br />
性别：<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女<br />
技能：<input type="checkbox">Java
<input type="checkbox">c++
<input type="checkbox">web<br />
国籍：<select>
<option>请选择国籍</option>
<option>中国</option>
<option>日本</option>
</select><br />
补充内容：<br /><textarea rows="5" cols="20"></textarea><br />
<input type="file" /><br />
<input type="reset" />
<input type="submit" />
</form>
<h4>表单表格</h4>
<form>
<table width="200" align="center" cellspacing="0">
<tr>
<td> 账户：</td>
<td> <input type="text" value="请输入你的账号"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" ></td>
</tr>
<tr>
<td> 性别：</td>
<td>
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td> 技能：</td>
<td>
<input type="checkbox">Java
<input type="checkbox">c++
<input type="checkbox">web
</td>
</tr>
<tr>
<td> 国籍：</td>
<td>
<select>
<option>请选择国籍</option>
<option>中国</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td>补充内容：</td>
<td><textarea rows="5" cols="20"></textarea></td>
</tr>
<tr>
<td colspan="2"> <input type="file" /></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
<h4>表单提交</h4>
<!--form标签中的action属性可以设置表单提交到的服务器的地址
method属性是提交方式有GET（默认）和 POST
表单提交需要给表单中的项目添加 name值，并且给选择框添加 value值-->
<form action="https://www.baidu.com/">
<table width="200" align="center" cellspacing="0">
<tr>
<td> 账户：</td>
<td> <input name="zh" type="text" value="请输入你的账号"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input name="mm" type="password" ></td>
</tr>
<tr>
<td> 性别：</td>
<td>
<input type="radio" name="sex" value="nan" checked="checked" />男
<input type="radio" name="sex" value="nv"/>女
</td>
</tr>
<tr>
<td> 技能：</td>
<td>
<input name="skill" value="java" type="checkbox">Java
<input name="skill" value="c++" type="checkbox">c++
<input name="skill" value="web" type="checkbox">web
</td>
</tr>
<tr>
<td> 国籍：</td>
<td>
<select name="country">
<option >请选择国籍</option>
<option value="cn">中国</option>
<option value="jp">日本</option>
</select>
</td>
</tr>
<tr>
<td>补充内容：</td>
<td><textarea name="content" rows="5" cols="20"></textarea></td>
</tr>
<tr>
<td colspan="2"> <input type="file" /></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
如果不指定请求方式，表单默认的是get请求，参数是query参数
点击提交后：
form的事件：form表单中的onsubmit
-
onsubmit：只能表单上使用，提交表单前由表单触发该事件
-
onclick：是按钮等控件使用，用来触发点击事件
在提交表单前，一般都会进行数据验证： 在submit按钮上的onclick事件中验证 或者 在form标签的onsubmit事件中验证
二、react中
非受控组件：现用现取
页面里有表单，其中输入类DOM的值（比如input checkbox radio...等等）都是现用现取（取用户输入的然后使用）
class Login extends React.Component{
handleSubmit = (event)=>{
console.log(event.target)
/*
<form>
...
</form>
*/
event.preventDefault() //阻止表单提交（默认动作）
const {username, password} = this
alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input ref={c => this.username = c} type="text" name="username"/>
密码：<input ref={c => this.password = c} type="password" name="password"/>
{/*submit按钮包括：1、type为submit的input 2、type为submit的button 3、未设置type的button 默认为submit类型
都能触发onSubmit事件（实际触发该事件的是表单，所以e.target是<form>...</form>）
*/}
{/*<input type="submit" name="submit" value="登录"/>*/}
<button>登录</button>
</form>
)
}
}
受控组件（建议使用）：随着输入，维护状态
页面中所有输入类的DOM，随着输入，把数据都维护到state中。等需要使用时，直接从state里取出来
使用onchange事件来写：
onchange事件： 输入类的DOM都可以绑定该事件，该DOM改变了就可以触发该事件（所以无需再使用ref拿到该DOM元素）。在原生里是onchange，在react中是onChange。
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event)=>{
this.setState({password:event.target.value})
}
//表单提交的回调
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text" name="username"/>
密码：<input onChange={this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
将上述代码进行优化： （代码优化）高阶函数与函数柯里化
