写出一个form表单 第一行是名称 input 第二行是单选框 男女

好的，下面是一个简单的HTML代码，实现了你的需求：

<form>
  <label for="name">名称：</label>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="gender">性别：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br><br>
  
  <input type="submit" value="提交">
</form>

这个表单包含了一个文本输入框和一个单选框，用户可以填写名称并选择性别，然后提交表单。请注意，这只是一个基本的示例，你可以根据自己的需求对表单进行更改和扩展。

相关问题

用Ant Design组件写一个form表单，第一项是单选框，第二项是输入款

在Ant Design库中，你可以很容易地创建一个包含单选按钮和输入框的表单。下面是一个基本的例子：

import { Form, Input, Radio } from 'antd';

const FormItem = Form.Item;
const Option = Radio.Option;

class MyForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    
    return (
      <Form onSubmit={this.handleSubmit} layout="inline">
        <FormItem label="选择性别" hasFeedback>
          {getFieldDecorator('gender', {
            rules: [{ type: 'enum', enum: ['male', 'female'], message: '请选择有效性别' }],
          })(
            <Radio.Group>
              <Option value="male">男</Option>
              <Option value="female">女</Option>
            </Radio.Group>
          )}
        </FormItem>

        <FormItem label="姓名">
          {getFieldDecorator('name', {})(<Input placeholder="请输入姓名" />)}
        </FormItem>
        
        <FormItem wrapperCol={{ offset: 8 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedMyForm = Form.create()(MyForm);

export default WrappedMyForm;

在这个例子中，我们使用了`Form`, `Input`和`Radio`组件来自Ant Design。`getFieldDecorator`用于将React控件与Form的验证和状态管理关联起来。

vue3中写一个form表单，里面有单选框和输入框

在Vue3中创建一个包含单选框和输入框的表单非常直观，可以使用模板、组件以及 Vue 的双向数据绑定特性来实现。这里是一个基本的例子：

<template>
  <div id="form">
    <h2>用户注册</h2>
    <form @submit.prevent="submitForm">
      <label for="username">用户名：</label>
      <input type="text" v-model="username" placeholder="请输入用户名" required>

      <!-- 单选框示例 -->
      <br>
      <label>性别：</label>
      <input type="radio" value="male" v-model="gender" :name="genderName" id="male">男
      <input type="radio" value="female" :name="genderName" id="female">女

      <!-- 提交按钮 -->
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      gender: '', // 初始值可根据需求设置，默认可能是空字符串
      genderName: 'gender', // 确保所有单选框有相同的 name 属性
    };
  },
  methods: {
    submitForm() {
      console.log('表单提交:', { username: this.username, gender: this.gender });
      // 在实际应用中，你可以将表单数据发送到服务器或者做进一步处理
    },
  },
};
</script>

在这个例子中，`v-model`指令用于双向数据绑定，当你在输入框或单选框上做出选择时，对应的属性值会实时更新。`@submit.prevent`阻止了表单默认的提交行为，并触发自定义的 `submitForm` 方法。