如果您对html-form表单感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于html-form表单的详细内容，我们还将为您解答HTMLform表单的相关问题，并且为您提供关
如果您对html-form表单感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于html-form表单的详细内容，我们还将为您解答HTMLform表单的相关问题，并且为您提供关于14 Jun 18 复习, form表单、Ant-Design-组件-——-Form表单（一）.md、Ant-Design-组件-——-Form表单（二）.md、antd form表单 key造成每次只能输入一个字符的有价值信息。
本文目录一览：- html-form表单（HTMLform表单）
- 14 Jun 18 复习, form表单
- Ant-Design-组件-——-Form表单（一）.md
- Ant-Design-组件-——-Form表单（二）.md
- antd form表单 key造成每次只能输入一个字符
html-form表单（HTMLform表单）
表单是WEB浏览器和WEB服务器之间实现信息交流和传递的桥梁。
表单实际上包含两个重要的组成部分：一是描述描述表单信息的web页面，二是用于处理表单数据的服务器端表单处理程序。
一、action-----处理表单
一般情况下，表单的处理程序action和传送方法method是必不可少的参数。
真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或脚本的一个完整URL
action的值定义的是表单要提交的地址。
表单提交后的数据处理程序由action属性指定。
二、method-----传送方式
method属性用来定义处理程序从表单中获得信息的方式，只有两个值：get或post，该值决定了表单中的数据是以什么方式发送到服务器的。默认为get。
（1）get：表单数据被看作CGI或ASP的参数发送，也就是输入数据会附在URL后，由用户直接发送到服务器。速度比post快，但输入的数据长度有限制。
（2）post：表单与URL分开发送，用户端的计算机通知服务器来读取数据，所以无数据长度的限制，但是比get慢。
三、enctype-----编码方式
1、enctype参数用于设置表单信息提交的编码方式；该属性定义了 MIME编码方式；取值如下：
text/plain：以纯文本的形式传送
application/x-www-form-urlencoded：默认的编码形式
multipart/form-data：MIME编码，上传文件的表单必须选择该项。
2、当表单以电子邮件的形式发送，表单信息不以附件的形式发送，应将“MIME类型”设置为text/plain。
四、为表单添加控件
按照控件的填写方式可分为输入类和菜单列表类。
<form>
<input name="" type="控件类型">
</form>
控件类型的值有text、password、radio、checkbox、button、submit、reset、image、hidden、file。
1、输入类： name值不能包含特殊字符，也不能以html预留作为名称。
（1）<input type="text" name="" size="控件的长度" maxlength="最长的字符数" value="文本框中的默认值">
（2）<input type="password" name="" size="控件的长度" maxlength="最长的字符数" value="文本框中的默认值">
禁止用户复制粘贴密码并且改变掩码样式情况：
<input type="password" name="" size="" maxlength="" oncopy="return false" oncut="return false" onpaste="return false">
（3）<input type="radio" name="" value="" checked="checked"> checked表示默认选中；value表示该选项的值传到处理程序中。
（4）<input type="checkbox" name="" value="" checked="checked">
（5）<input type="button" name="" value="按钮上的文字" onclick="鼠标按下按钮时的处理程序">
（6）<input type="submit" name="" value=""> 不需要onclick
（7）<input type="reset" name="" value="">
（8）<input type="image" name="" src="图像地址"> 使用图像域创建与网页整体效果相统一的图像提交按钮
（9）<input type="hidden" name="" value="" value="提交值"> 隐藏域主要是传递参数的，不显示在页面中
（10）<input type="file" name=""> 常用于上传文件，查找硬盘中的文件路径
2、菜单列表类 该控件是为了节省页面空间而设计的
该菜单列表标记的属性：name、size(显示的选项数目)、multiple(列表中的项目多选)、value、selected(默认选项)
3、textarea文本域 可以输入多行文字
<textarea name="" value="" rows="行数" cols="列数"></textarea>
14 Jun 18 复习, form表单
·14 Jun 18 复习 form表单
1、在django中使用form表单要注意以下三方面：
A、form表单必须有action和method属性
B、接收用户输入的标签（input，select等）必须放到form表单中，且必须携带name属性
C、form表单中必须有submit按钮（input中type=“submit“）
2、form表单属性之action
作用： 指定向何处发送表单数据
取值：可以时绝对路径，也可是相对路径
3、form表单属性之method
作用： 定义表单提交数据的方式
get 或 post
4、form内表单控件之input
作用： 接收用户输入或收集用户信息
type属性（指定控件类型）：
1） radio单选框。 要完成单选，多个input的name要相同；
2） radio单选框。 在相应input框中填入checked=”checked ”以设立默认值
3） checkbox复选框。在相应input框中填入checked=”checked ”以设立默认值
4） file上传文件
5） submit可以自动提交；button需要绑定onclick事件才能使用
6） reset重置按钮
name属性： 指定提交数据的key
value属性： 指定提交数据的value，可设置输入框的默认值
placeholder属性： 提示输入
disabled：禁用该控件，不会提交任何关于该控件的数据
5、form内表单控件之label
作用： 关联文本与表单元素，实现点击文本时，如同点击表单元素一样
for属性： for属性的值等于被关联的表单元素的id值
6、form内表单控件之textarea
作用： 多行输入框
7、form内表单控件之select
作用： 下拉列表
name属性： 指定提交给后台数据的key
size属性：size值大于1为滚动列表，否则为下拉列表
multiple属性： 多选
- optgroup：label属性设置提示信息
- option：value属性指定值提交给后台数据的value
selected=”selected ”以设立默认值
Ant-Design-组件-——-Form表单（一）.md
Ant Design of React @3.10.9
拉取项目 luwei.web.study-ant-design-pro, 切换至
query分支，可看到 Form 表单实现效果
实现一个查询表单
查询表单
思路
- Create表单：
@Form.create() - 表单数据绑定
getFieldDecorator - 渲染查询表单的查询条件
render - 获取查询条件的值
validateFields
代码
1. Create表单：`@Form.create()`
Form.create()
这是一个高阶函数，传入的是react组件，返回一个新的react组件，在函数内部会对传入组件进行改造，添加上一定的方法用于进行一些秘密操作 如果有对高阶组件有想要深入的请移步《深入理解 React 高阶组件》，我们这里不做过多的深究。
经 Form.create() 包装过的组件会自带 this.props.form 属性
// 使用方式如下：
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
代码中结合 @ 的修饰器，用 @Form.create() 进行创建。
2. 表单数据绑定 `getFieldDecorator`
getFieldDecorator(id, options)
用于和表单进行双向绑定
<!-- 表单数据绑定 -->
<Form.Item {...formItemLayout} label={''名称''}>
{getFieldDecorator(''searchName'')(
<Input placeholder={''请输入名称''} />
)}
</Form.Item>
3. 渲染查询表单的查询条件 `render `
在定义表单字段的时候，渲染到页面中，与步骤2代码一致
更多FormItem属性请参考Ant Design - Form - Form.Item
4. 获取查询条件的值 `validateFields`
form.validateFields / validateFieldsAndScroll
校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件
const { form } = this.props;
// 获取并检查表单数据
form.validateFields((err, fieldsValue) => {
if (err) return;
const { searchName = '''' } = fieldsValue;
});
深入了解
- Ant Design Form表单
- rc-form
- antd源码解读（9）- Form
欢迎和我们一起并肩作战： web@talkmoney.cn
访问 www.talkmoney.cn 了解更多
提供深圳微信公众号制作，高质量的钉钉外包，广东企业微信建设，东莞微信小程序制作，专业的小游戏开发，广州H5建设
Ant-Design-组件-——-Form表单（二）.md
Ant Design of React @3.10.9
拉取项目 luwei.web.study-ant-design-pro, 切换至
add分支，可看到 Form 表单实现效果实现一个新增表单
新增表单
思路
- Create表单：
@Form.create()- 表单数据绑定
getFieldDecorator- 渲染查询表单的查询条件
render- 定义表单校验条件 rules
- 设置一组输入控件的值
setFieldsValue- 获取查询条件的值
validateFields区别于[Form表单(一)]()，新增了
表单校验条件和设置控件值两点。代码
1. Create表单：`@Form.create()`
Form.create()
这是一个高阶函数，传入的是react组件，返回一个新的react组件，在函数内部会对传入组件进行改造，添加上一定的方法用于进行一些秘密操作 如果有对高阶组件有想要深入的请移步《深入理解 React 高阶组件》，我们这里不做过多的深究。
经
Form.create()包装过的组件会自带this.props.form属性// 使用方式如下：
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);代码中结合
@的修饰器，用@Form.create()进行创建。2. 表单数据绑定 `getFieldDecorator`
getFieldDecorator(id, options)
用于和表单进行双向绑定
<!-- 表单数据绑定 -->
<Form.Item {...formItemLayout} label={''名称''}>
{getFieldDecorator(''searchName'')(
<Input placeholder={''请输入名称''} />
)}
</Form.Item>3. 渲染查询表单的查询条件 `render `
在定义表单字段的时候，渲染到页面中，与步骤2代码一致
更多FormItem属性请参考Ant Design - Form - Form.Item
4. 定义表单校验条件 rules
<Form.Item {...formItemLayout} label="名称">
{getFieldDecorator(''name'', {
rules: [
{
required: true,
message: ''必填'',
},
],
initialValue: this.state.name,
})(<Input placeholder="请输入名称" maxLength={25} />)}校验规则请参考Ant Design - Form 校验规则
5. 设置一组输入控件的值 setFieldsValue
this.props.form.setFieldsValue({
name: `hello world`,
});使用场景：
- 新增信息，将每个字段置空
- 更新信息，将原有的数据设置在相对的表单控件中。
setFieldsValue
动态设置/控制表单中控件的值
注意
- 使用
getFieldsValuegetFieldValuesetFieldsValue等时，应确保对应的 field 已经用getFieldDecorator注册过了。- 设置一组输入控件的值（注意：不要在
componentWillReceiveProps内使用，否则会导致死循环6. 获取查询条件的值 `validateFields`
form.validateFields / validateFieldsAndScroll
校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件
const { form } = this.props;
// 获取并检查表单数据
form.validateFields((err, fieldsValue) => {
if (err) return;
const { searchName = '''' } = fieldsValue;
});深入了解
- Ant Design Form表单
- rc-form
- antd源码解读（9）- Form
欢迎和我们一起并肩作战： web@talkmoney.cn
访问 www.talkmoney.cn 了解更多提供深圳微信公众号制作，高质量的钉钉外包，广东企业微信建设，东莞微信小程序制作，专业的小游戏开发，广州H5建设
antd form表单 key造成每次只能输入一个字符
1、出问题的代码
class VarContent extends Component<IProps> {
constructor(props:any) {
super(props);
this.state = {params:[{param:''hello'',value: ''word''}]}
}
componentDidMount() {
}
changeParam = (e:any,index:any) =>{
let temp = this.state.params
temp[index].param = e.target.value
this.setState({params:temp})
}
changeValue= (e:any,index:any)=>{
let temp = this.state.params
temp[index].value = e.target.value
this.setState({
params:temp
})
}
addParamValue = ()=>{
let temp = this.state.params
pLength = pLength +1
temp.push({param: '''',value: ''''})
this.setState({params:temp})
} delParamValue = (e:any,index:any) =>{
console.log("delParamValue======",index)
let temp = this.state.params
temp.splice(index,1)
this.setState({params:temp})
} render() {
return this.state.params.map((v:any,k:any)=> (
<Form style={{marginTop: ''10px''}}>
<Row>
<Col span={6}>
<Form.Item label="变量名" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} key={v.param} >
<Input
placeholder="变量名"
type="text"
value={v.param}
onChange ={e=>this.changeParam(e,k)}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="变量值" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
<Input placeholder="变量值"
type="text"
value={v.value}
onChange ={e=>this.changeValue(e,k)}
/>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item wrapperCol={{ span: 24 }}>
<div>
<Button icon="minus" style={{ marginRight: ''10px'' }} onClick={e=> this.delParamValue(e, k)} />
<Button icon="plus" onClick = {this.addParamValue} />
</div>
</Form.Item>
</Col>
</Row>
</Form>
)
);
} }
export default VarContent;
2 、解决思路 当时以为是state的原因，更新太快导致的。就尝试是用mobx，结果mobx也出现相同的问题。 没有办法又来重新分析表单，结果尝试把表单的key= v.param就成功了
3、大家知道为啥，可以一起讨论
关于html-form表单和HTMLform表单的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于14 Jun 18 复习, form表单、Ant-Design-组件-——-Form表单（一）.md、Ant-Design-组件-——-Form表单（二）.md、antd form表单 key造成每次只能输入一个字符的相关信息，请在本站寻找。
本文标签：
